- <script type="text/javascript">
- // 采用 jquery.form.js 异步上传图片, 并结合 < form > 表单
- function uploadPicture() {
- var options = {
- // 请求路径
- url : "/upload/uploadPic.do",
- dataType : "json",
- type : "post",
- success : function(data) {
- // 处理结果
- // 将相对路径设置给隐藏域中, 提交时用
- $("#imgUrl").val(data.path);
- // 将全路径设置给 img 标签, 显示图片用
- $("#allImgUrl").attr("src", data.url);
- }
- }
- $("#jvForm").ajaxSubmit(options);
- }
- </script>
- <tr>
- <td width="20%" class="pn-flabel pn-flabel-h"></td>
- <td width="80%" class="pn-fcontent">
- <img width="100" height="100" id="allImgUrl" />
- <!-- 图片存在数据库的路径 -->
- <input type="hidden" id="imgUrl" name="imgUrl"></input>
- <input type="file" onchange="uploadPicture()" name="uploadPic" /></td>
- </tr>
一定要在 form 表单中填写 enctype="multipart/form-data"
<form id="jvForm" action="/brand/add.do" method="post" enctype="multipart/form-data"> </form>
在 springmvc.xml 文件中添加文件软件器
- <!-- 图片转换器 -->
- <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
- <property name="maxUploadSize" value="10485760"></property>
- </bean>
编写文件上传 UploadController.java
- package cn.lzc.code.controller.admin;
- import java.io.IOException;
- import java.text.DateFormat;
- import java.text.SimpleDateFormat;
- import java.util.Date;
- import java.util.Random;
- import javax.servlet.http.HttpServletResponse;
- import org.apache.commons.io.FilenameUtils;
- import org.json.JSONObject;
- import org.springframework.stereotype.Controller;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.RequestMethod;
- import org.springframework.web.bind.annotation.RequestParam;
- import org.springframework.web.multipart.MultipartFile;
- import com.sun.jersey.api.client.Client;
- import com.sun.jersey.api.client.ClientHandlerException;
- import com.sun.jersey.api.client.UniformInterfaceException;
- import com.sun.jersey.api.client.WebResource;
- import cn.lzc.code.web.Constants;
- import cn.lzc.common.web.ResponseUtils;
- /**
- ``code`` * 上传文件管理 Controller
- ``code`` *
- ``code`` * @author admin
- ``code`` *
- ``code`` */
- @Controller
- public class UploadController {
- /**
- ``code`` * 异步上传图片
- ``code`` *
- ``code`` * @param uploadFile
- ``code`` * @param response
- ``code`` */
- @RequestMapping(value="/upload/uploadPic.do",method=RequestMethod.POST)
- public void uploadBrandPic(@RequestParam(required = false) MultipartFile uploadPic, HttpServletResponse response) {
- // 图片名称生成策略 --- 采用时间格式 (精确到毫秒) 并追加随机 3 位 (10 以内) 数字
- // 精确到毫秒
- DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
- String picName = df.format(new Date());
- // 随机再生成 3 位 10 以内的数
- Random r=new Random();
- for (int i = 0; i < 3; i++) {
- picName+=r.nextInt(10);
- }
- // 获取扩展名
- String originalFilename = uploadPic.getOriginalFilename();
- String ext = FilenameUtils.getExtension(originalFilename);
- // 相对路径
- String path="upload/"+picName+"."+ext;
- // 全路径
- String url="http://localhost:8088/image-web/"+path;
- //jersey 发送另一台 Tomcat(可读写)
- // 实例化 Jersey
- Client client=new Client();
- // 想要发送到的服务器地址, 记住, 必须设置 tomcat 服务器的权限, 不然无法上传到 tomcat
- // 设置请求路径
- WebResource resource = client.resource(url);
- try {
- // 发送开始 put
- resource.put(String.class, uploadPic.getBytes());
- } catch (UniformInterfaceException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- } catch (ClientHandlerException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- } catch (IOException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
- // 返回 json 数据给页面,(包括 url 回显路径, Path 保存数据库的路径)
- JSONObject jo=new JSONObject();
- jo.put("path", path);
- jo.put("url", url);
- // 返回数据给页面
- ResponseUtils.renderJson(response, jo.toString());
- }
- }
写一个 RequestUtils.java 工具类, 用来响应相应的数据到前台页面
- package cn.lzc.common.web;
- import java.io.IOException;
- import javax.servlet.http.HttpServletResponse;
- /**
- ``code`` * Response 帮助类 支持 JSON XML Text
- ``code`` *
- ``code`` * @author admin
- ``code`` *
- ``code`` */
- public class ResponseUtils {
- // 发送 Json
- public static void renderJson(HttpServletResponse response, String text) {
- rend(response, "application/json;charset=UTF-8", text);
- }
- // 发送 xml
- public static void renderXml(HttpServletResponse response, String text) {
- rend(response, "text/xml;charset=UTF-8", text);
- }
- // 发送 text
- public static void renderText(HttpServletResponse response, String text) {
- rend(response, "text/plain;charset=UTF-8", text);
- }
- // 发送
- public static void rend(HttpServletResponse response, String contextType, String text) {
- // 设置传输类型
- response.setContentType(contextType);
- // 发送
- try {
- response.getWriter().write(text);
- } catch (IOException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
- }
- }
来源: http://www.bubuko.com/infodetail-2656924.html