实现头像,文件上传

电玩女神 2022-05-22 13:09 578阅读 0赞

该文章来源于 https://www.cnblogs.com/libo0125ok/p/7773898.html

一、Tomcat服务器部分

1、Tomcat服务器

单独复制一份Tomcat，用来作为文件服务器

1.1 web.xml文件：

需要在该Tomcat的conf目录下的web.xml文件的大概100行添加如下几行（红框内部分）：

1048036-20171102181110123-1915406525.jpg

1.2 server.xml文件：

需要在该Tomcat的conf目录下的server.xml文件做一些端口的修改

1048036-20171102181701482-1233748541.jpg

1048036-20171102181715107-1169448062.jpg

1048036-20171102181740795-1312674438.jpg

1.3 Tomcat下建立文件夹

在该Tomcat的/webapps/ROOT目录下创建一个upload目录，用来存放上传的文件

1048036-20171102182240795-2108932850.jpg

1.4 启动Tomcat服务器

以上三步做完后，就可以启动Tomcat服务器了，在Tomcat的bin目录下执行 startup.sh 脚本

1048036-20171102182801638-45923572.jpg

二、java部分

1048036-20171102184211638-161647437.jpg

2.1 jar包

除了其他的jar包以外，还需要以下几个jar包

commons-io-1.3.2.jar

commons-fileupload-1.2.1.jar

jersey-client-1.18.1.jar

jersey-core-1.18.1.jar

jersey-common

1048036-20171102183622263-1512326443.jpg

1048036-20171102183635201-933824105.jpg

2.2 配置文件

2.2.1 spring-mvc.xml文件添加如下部分：

  1. <!-- 上传文件 -->
  2. <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  3. 　　<!--最大上传尺寸  5M -->
  4.    <property name="maxUploadSize" value="5242880"/>
  5. </bean>

2.2.2 config.properties 文件添加如下部分：

  1. #文件服务器地址
  2. uploadHost=http://172.16.5.102:8090/
  3. #上传的文件保存的目录
  4. imgPath = upload/

2.3 java文件

2.3.1 Upload.java

复制代码

  1. package com.lin.utils;
  3. import java.io.File;
  4. import java.io.IOException;
  5. import java.text.SimpleDateFormat;
  6. import java.util.Date;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  11. import org.apache.commons.io.FilenameUtils;
  12. import org.springframework.web.multipart.MultipartFile;
  14. import com.sun.jersey.api.client.Client;
  15. import com.sun.jersey.api.client.WebResource;
  18. /**
  19.  * 上传文件工具类
  20.  * @author libo
  21.  */
  22. public class Upload {
  24.     /**
  25.      * 上传文件
  26.      * @param request
  27.      * @param response
  28.      * @param serverPath    服务器地址:(http://172.16.5.102:8090/)
  29.      * @param path             文件路径（不包含服务器地址：upload/）
  30.      * @return
  31.      */
  32.     public static String upload(Client client, MultipartFile file, HttpServletRequest request,HttpServletResponse response, String serverPath, String path){
  33.         // 文件名称生成策略（UUID uuid = UUID.randomUUID()）
  34.         Date d = new Date();
  35.         SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
  36.         String formatDate = format.format(d);
  37.         String str = "";
  38.         for(int i=0 ;i <5; i++){
  39.             int n = (int)(Math.random()*90)+10;
  40.             str += n;
  41.         }
  42.         // 获取文件的扩展名
  43.         String extension = FilenameUtils.getExtension(file.getOriginalFilename());
  44.         // 文件名
  45.         String fileName = formatDate + str + "." + extension;
  46.         //相对路径
  47.         String relaPath = path + fileName;
  49.         String a = serverPath + path.substring(0, path.lastIndexOf("/"));
  50.         File file2 = new File(a);
  51.         if(!file2.exists()){
  52.             boolean mkdirs = file2.mkdirs();
  53.             System.out.println(mkdirs);
  54.         }
  56.         // 另一台tomcat的URL（真实路径）
  57.         String realPath = serverPath + relaPath;
  58.         // 设置请求路径
  59.         WebResource resource = client.resource(realPath);
  61.         // 发送开始post get put（基于put提交）
  62.         try {
  63.             resource.put(String.class, file.getBytes());
  64.             return fileName+";"+relaPath+";"+realPath;
  65.         } catch (IOException e) {
  66.             e.printStackTrace();
  67.             return "";
  68.         }
  69.     }
  71.     /**
  72.      * 删除文件
  73.      * @param filePath（文件完整地址：http://172.16.5.102:8090/upload/1234.jpg）
  74.      * @return
  75.      */
  76.     public static String delete(String filePath){
  77.         try {
  78.             Client client = new Client();
  79.             WebResource resource = client.resource(filePath);
  80.             resource.delete();
  81.             return "y";
  82.         } catch (Exception e) {
  83.             e.printStackTrace();
  84.             return "n";
  85.         }
  86.     }
  87. }

复制代码

2.3.2 controller层

复制代码

  1. package com.lin.controller;
  3. import java.io.File;
  4. import java.io.IOException;
  5. import java.text.SimpleDateFormat;
  6. import java.util.ArrayList;
  7. import java.util.Date;
  8. import java.util.HashMap;
  9. import java.util.List;
  10. import java.util.Map;
  12. import javax.annotation.Resource;
  13. import javax.servlet.ServletContext;
  14. import javax.servlet.http.HttpServletRequest;
  15. import javax.servlet.http.HttpServletResponse;
  17. import org.springframework.beans.factory.annotation.Value;
  18. import org.springframework.stereotype.Controller;
  19. import org.springframework.web.bind.annotation.RequestMapping;
  20. import org.springframework.web.bind.annotation.RequestMethod;
  21. import org.springframework.web.bind.annotation.RequestParam;
  22. import org.springframework.web.bind.annotation.ResponseBody;
  23. import org.springframework.web.multipart.MultipartFile;
  24. import org.springframework.web.multipart.MultipartHttpServletRequest;
  25. import org.springframework.web.multipart.MultipartResolver;
  26. import org.springframework.web.multipart.commons.CommonsMultipartResolver;
  27. import org.springframework.web.servlet.config.VelocityConfigurerBeanDefinitionParser;
  29. import com.lin.domain.data.ResData;
  30. import com.lin.domain.data.ResListData;
  31. import com.lin.domain.error.Error;
  32. import com.lin.domain.sysUser.SysUser;
  33. import com.lin.domain.sysUser.SysUserWithDep;
  34. import com.lin.service.SysUserService;
  35. import com.lin.utils.Aes;
  36. import com.lin.utils.DateTimeUtils;
  37. import com.lin.utils.ResponseUtils;
  38. import com.lin.utils.Upload;
  39. import com.lin.utils.Utils;
  40. import com.sun.jersey.api.client.Client;
  42. import net.sf.json.JSONObject;
  44. /**
  45.  * 后台用户-controller
  46.  * @author libo
  47.  */
  48. @Controller
  49. @RequestMapping("/sysUser")
  50. public class SysUserController {
  52.     @Resource
  53.     private SysUserService sysUserService;
  55.     @Value(value="${imgPath}")    //后台图片保存地址
  56.     private String imgPath;
  58.     @Value(value="${uploadHost}")
  59.     private String uploadHost;    //项目host路径    
  61.     /**
  62.      * 后台用户登陆功能
  63.      * @return
  64.      * @throws IOException 
  65.      */
  66.     @ResponseBody
  67.     @RequestMapping(value="/login.do", method=RequestMethod.POST)
  68.     public void login(HttpServletRequest req, HttpServletResponse res, 
  69.             @RequestParam(required=true) String loginEmail, 
  70.             @RequestParam(required=true) String loginPwd) throws IOException{
  71.         //代码省略
  72.     }
  74. /**
  75.      * 根据id查询用户信息（包括部门信息）
  76.      * @param req
  77.      * @param res
  78.      * @param id
  79.      * @throws IOException 
  80.      */
  81.     @ResponseBody
  82.     @RequestMapping(value="/getSysUser.do", method=RequestMethod.GET)
  83.     public void getSysUser(HttpServletRequest req, HttpServletResponse res, 
  84.             @RequestParam(required=true) Integer id) throws IOException{
  85.      　　//代码省略
  86.     }
  88.     /**
  89.      * 更新后台用户信息
  90.      * @param req
  91.      * @param res
  92.      * @throws IOException 
  93.      */
  94.     @ResponseBody
  95.     @RequestMapping(value="/updateSysUser.do" ,method=RequestMethod.POST)
  96.     public void updateSysUser(HttpServletRequest req, HttpServletResponse res) throws IOException{
  97.        //代码省略
  98.     }
  100.     /**
  101.      * 添加用户
  102.      * @param req
  103.      * @param res
  104.      * @throws IOException 
  105.      */
  106.     @ResponseBody
  107.     @RequestMapping(value="/addSysUser.do", method=RequestMethod.POST)
  108.     public void addSysUser(HttpServletRequest req, HttpServletResponse res) throws IOException {
  109.         //代码省略
  110.     }
  113.     /**
  114.      * 上传用户头像
  115.      * @param request
  116.      * @param response
  117.      */
  118.     @ResponseBody
  119.     @RequestMapping(value="uploadSysHeadImg.do", method=RequestMethod.POST)
  120.     public void uploadSysHeadImg(HttpServletRequest request,HttpServletResponse response){
  121.         JSONObject jo = new JSONObject();
  122.         try {
  123.             MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
  124.             MultipartHttpServletRequest Murequest = resolver.resolveMultipart(request);       
  125.             Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象
  127. 　　　　　　　// 实例化一个jersey
  128.             Client client = new Client();
  130.             List<String> fileNameList = new ArrayList<>();
  131.             List<String> relaPathList = new ArrayList<>();
  132.             List<String> realPathList = new ArrayList<>();
  133.             for(MultipartFile pic: files.values()){
  134.                 String uploadInfo = Upload.upload(client, pic, request, response, uploadHost, imgPath);
  135.                 if(!"".equals(uploadInfo)){    //上传成功
  136.                     String[] infoList = uploadInfo.split(";");
  137.                     fileNameList.add(infoList[0]);    //文件名
  138.                     relaPathList.add(infoList[1]);    //相对路径
  139.                     realPathList.add(infoList[2]);    //真实完整路径
  140.                 }else{    //上传失败
  141.                     fileNameList.add("");
  142.                     relaPathList.add("");
  143.                     realPathList.add("");
  144.                 }
  145.             }
  146.             jo.put("success", 1);
  147.             jo.put("error", null);
  148.             jo.put("fileNameList", fileNameList);
  149.             jo.put("relaPathList", relaPathList);
  150.             jo.put("realPathList", realPathList);
  151.         }catch (Exception e) {
  152.             jo.put("success", 0);
  153.             jo.put("error", "上传失败");
  154.         }
  155.         ResponseUtils.renderJson(response, jo.toString());
  156.     }    
  157. }

复制代码

其他的java文件省略，然后运行java项目

三、前端部分

3.1 index1-cropper图片剪切上传

复制代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>index1-cropper图片剪切上传</title>
  5.     <meta charset="utf-8"/>
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <link rel="stylesheet" href="lib/cropper/dist/cropper.min.css" />
  9. </head>
  10. <body>
  12. <!-- accept="image/*,camera":表示允许调用相册和摄像头，capture="camera"：表示直接打开摄像头-->
  13. <!--<input id="btn1" type="file" accept="image/*,camera" capture="camera" style="opacity: 0;"/>-->
  14. <input id="btn1" type="file" accept="image/*,camera" style="opacity: 0;"/>
  16. <div>
  17.     <div>上传之前的图片</div>
  18.     <img id="face_image" style="width:50px;height:50px;border-radius: 25px;border: 1px solid #fff;"/>
  19.     <div>上传之后服务器的图片</div>
  20.     <img id="success_image" style="width:50px;height:50px;border-radius: 25px;border: 1px solid #fff;"/>
  21. </div>
  22. <div>
  23.     <button id="upload_btn">上传头像</button>
  24.     <button id="image_save">保存</button>
  25.     <span></span>
  26. </div>
  28. <div class="upload-img" style="width:300px;height: 300px;">
  29.     <img src=""/>
  30. </div>
  32. <script src="jquery.min.js"></script>
  33. <script src="lib/cropper/dist/cropper.min.js"></script>
  34. <script src="lib/canvas-toBlob/canvas-toBlob.js"></script>
  36. <script>
  37.     $(function() {
  38.         //触发input file
  39.         $('#upload_btn').click(function() {
  40.             console.log('模拟点击。。。');
  41.             $('#btn1').trigger('click');
  42.         });
  44.         //图片上传
  45.         var $image = $('.upload-img > img');
  46.         $image.cropper({
  47.             viewMode: 1,
  48. //            preview: '.img-preview', //不同尺寸预览区
  49.             aspectRatio: 1, //裁剪比例，NaN-自由选择区域
  50.             autoCropArea: 0.7, //初始裁剪区域占图片比例
  51.             crop: function(data) { //裁剪操作回调
  52.                 console.log(data);
  53.             }
  54.         });
  55.         var fileName; //选择上传的文件名
  56.         $('#btn1').change(function(){
  57.             var file = this.files[0];
  58.             fileName = file.name;
  59.             var reader = new FileReader();
  60.             //reader回调，重新初始裁剪区
  61.             reader.onload = function(){
  62.                 // 通过 reader.result 来访问生成的 DataURL
  63.                 var url = reader.result;
  64.                 //选择图片后重新初始裁剪区
  65.                 $image.cropper('reset', true).cropper('replace', url);
  66.             };
  67.             reader.readAsDataURL(file);
  68.         });
  70.         /*
  71.          * 上传图片
  72.          */
  73.         $('#image_save').click(function() {
  74.             var type = $image.attr('src').split(';')[0].split(':')[1];
  76.             var canVas = $image.cropper("getCroppedCanvas", {});
  77.             //将裁剪的图片加载到face_image
  78.             $('#face_image').attr('src', canVas.toDataURL());
  79.             canVas.toBlob(function(blob) {
  80.                 var formData = new FormData();
  81.                 formData.append("file", blob, fileName);
  82.                 http://172.16.5.102:9000/index1-cropper%E5%9B%BE%E7%89%87%E5%89%AA%E5%88%87%E4%B8%8A%E4%BC%A0.html
  83.                 $.ajax({
  84.                     type: "POST",
  85.                     url: 'http://172.16.5.102:8081/ssm_project/sysUser/uploadSysHeadImg.do',
  86.                     data: formData,
  87.                     contentType: false, //必须
  88.                     processData: false, //必须
  89.                     dataType: "json",
  90.                     success: function(res){
  91.                         //清空上传文件的值
  92.                         $('#btn1').val('');
  93.                         $('#success_image').attr('src', res.realPathList[0]);
  94.                     },
  95.                     error : function() {
  96.                         //清空上传文件的值
  97.                         $('#btn1').val('');
  98.                     }
  99.                 });
  100.             }, type);
  101.         });
  103.         //取消
  104.         $("#image_cancel").click(function() {
  105.             //清空上传文件的值
  106.             $(_pageId + inputFileId).val('');
  107.         });
  108.     });
  109. </script>
  110. </body>
  111. </html>

复制代码

效果图：

1048036-20171102190238498-401886395.jpg

#

3.2 index2-jquery-Form表单提交

复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <!-- 选择图片后，就开始上传 -->
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <title>index2-jquery-Form表单提交</title>
  9.     <script src="jquery.min.js"></script>
  10.     <script src="jquery.form.js"></script>
  11. </head>
  12. <body>
  13. <img height="100" id="success_img"/>
  14. <form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data">
  15.     <!-- 保存图片的相对路径，方便提交给后台，存到数据库 -->
  16.     <input type="hidden" name="" id="img_path"/>
  18.     <input type="file" id="select_file" onchange="uploadPic()" name="pic12"/>
  19. </form>
  21. <script>
  22.     //上传图片
  23.     function uploadPic(){
  24.         //定义参数
  25.         var options = {
  26.             url:"http://172.16.5.102:8081/ssm_project/sysUser/uploadSysHeadImg.do",
  27.             type:"post",
  28.             dataType:"json",
  29.             success:function(res){
  30.                 $('#success_img').attr('src', res.realPathList[0]); //真实完整路径
  31.                 $('#img_path').val(res.relaPathList[0]);    //相对路径
  32.             }
  33.         };
  34.         //jquery.form使用方式
  35.         $("#jvForm").ajaxSubmit(options);
  36.     }
  37. </script>
  38. </body>
  39. </html>

复制代码

效果图：

1048036-20171102190537826-1621770988.jpg

3.3 index3-jquery-ajax提交

复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <!-- 选择图片后，需要点击提交按钮，才开始上传，可以不需要form标签 -->
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <title>index3-jquery-ajax提交</title>
  9.     <script src="jquery.min.js"></script>
  10. </head>
  11. <body>
  12. <img id="success_img" height="100px">
  13. <br>
  15. <input type="file" id="upload_file">
  17. <!-- 保存图片的相对路径，方便提交给后台，存到数据库 -->
  18. <input type="hidden" name="" id="img_path"/>
  19. <input type="button" id="uploadPicButton" value="上传">
  21. <div>
  22.     <a href="" id="download" download=""></a>
  23. </div>
  24. <script>
  25.     //上传图片
  26.     $('#uploadPicButton').click(function () {
  27.         var pic = $('#upload_file')[0].files[0];
  28.         var fd = new FormData();
  29.         fd.append('uploadFile', pic);
  30.         $.ajax({
  31.             url:"http://172.16.5.102:8081/ssm_project/sysUser/uploadSysHeadImg.do",
  32.             type:"post",
  33.             data: fd,   // Form数据
  34.             cache: false,
  35.             contentType: false,
  36.             processData: false,
  37.             success:function(res){
  38.                 $('#success_img').attr('src', res.realPathList[0]); //真实完整路径
  39.                 $('#img_path').val(res.relaPathList[0]);    //相对路径
  41.                 $('#download').html(res.fileNameList[0]);
  42.                 $('#download').attr('href', res.realPathList[0]);
  43.                 $('#download').attr('download', res.fileNameList[0]);
  44.             }
  45.         });
  46.     })
  47. </script>
  48. </body>
  49. </html>

复制代码

效果图：

1048036-20171102190738716-1996212041.jpg

1048036-20171102192029295-374699423.jpg

3.4 index4-WebUploader多文件上传

复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <title>index4-WebUploader多文件上传</title>
  8.     <link rel="stylesheet" href="lib/webuploader/dist/webuploader.css">
  9.     <script src="jquery.min.js"></script>
  10.     <script src="lib/webuploader/dist/webuploader.js"></script>
  11.     <style>
  12.         .file-item {
  14.             display: inline-block;
  15.             text-align: center;
  16.             font-size: 12px;
  17.             margin: 10px;
  18.         }
  19.         .file-item .progress {
  21.             position: relative;
  22.             height: 6px;
  23.             width: 100%;
  24.             background-color: #ddd;
  25.         }
  26.         .file-item .progress span {
  28.             position: absolute;
  29.             left: 0;
  30.             top: 0;
  31.             width: 0%;
  32.             height: 6px;
  33.             background-color: dodgerblue;
  34.         }
  35.         .suc-img-item {
  37.             display: inline-block;
  38.             height: 100px;
  39.             margin: 10px;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  45. <h3>图片上传</h3>
  46. <!--dom结构部分-->
  47. <div id="uploader-demo">
  48.     <h4>上传前缩略图</h4>
  49.     <div id="fileList" class="uploader-list"></div>
  50.     <div id="upInfo"></div>
  52.     <h4>上传后预览图</h4>
  53.     <div id="successImgList">
  54.             <!--<img class="suc-img-item" src="http://172.16.5.102:8090/upload/4337bd72-57d3-4d26-b94e-61193e9fe440.jpg">-->
  55.             <!--<img class="suc-img-item" src="http://172.16.5.102:8090/upload/4337bd72-57d3-4d26-b94e-61193e9fe440.jpg">-->
  56.     </div>
  58.     <div id="filePicker">选择文件</div>
  59. </div>
  60. <input type="button" id="btn" value="开始上传">
  61. <script>
  62. //    // 图片上传demo
  63.     $(function() {
  64.         var $ = jQuery,
  65.             $list = $('#fileList'),
  66.             $successImgList = $('#successImgList'),
  67.             ratio = window.devicePixelRatio || 1,  // 优化retina, 在retina下这个值是2 (window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例)
  68.             thumbnailWidth = 50 * ratio,   // 缩略图宽度
  69.             thumbnailHeight = 50 * ratio,  // 缩略图高度
  70.             uploader;    // Web Uploader实例
  72.         // 初始化WebUploader
  73.         uploader = WebUploader.create({
  74.             auto: false,   // 自动上传
  75.             swf:'../js/Uploader.swf',   // swf文件路径
  76.             server: 'http://172.16.5.102:8081/ssm_project/sysUser/uploadSysHeadImg.do',  // 文件接收服务端接口地址
  77.             threads:'5',        //同时运行5个线程传输
  78.             fileNumLimit:'10',  //文件总数量只能选择10个
  80.             // 选择文件的按钮，可选
  81.             pick: {
  82.                 id:'#filePicker',  //选择文件的按钮
  83.                 multiple:true      //允许可以同时选择多个图片
  84.             },
  86.             quality: 90,        // 图片质量，只有type为`image/jpeg`的时候才有效
  87.             compressSize: 0,     // 单位字节，如果图片大小小于此值，不会采用压缩
  88.             crop: true,        //是否同意剪切
  90.             //限制传输文件类型，accept可以不写
  91.             accept: {
  92.                 title: 'Images',    //描述
  93.                 extensions: 'gif,jpg,jpeg,bmp,png,mkv,mp4', //文件类型
  94.                 mimeTypes: '*/*'    //mime类型(*/* 可以上传所有类型)
  95.             },
  97.             compress: false,    //是否启用压缩
  98.             resize: false,      //尺寸不改变
  99.             duplicate: false   //是否允许重复上传
  100.         });
  103.         // 当有文件添加进来的时候，创建img显示缩略图使用
  104.         uploader.on('fileQueued', function(file) {
  105.             var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' +
  106.                             '<img>' +
  107.                             '<div class="info">' + file.name + '</div>' +
  108.                             '<div class="progress"><span></span></div>' +
  109.                         '</div>'),
  110.                 $img = $li.find('img');
  112.             $list.append($li);    // $list为容器jQuery实例
  114.             // 创建缩略图
  115.             // 如果为非图片文件，可以不用调用此方法。
  116.             // thumbnailWidth x thumbnailHeight 为 50 x 50
  117.             uploader.makeThumb(file, function(error, src) {
  118.                 if (error) {
  119.                     $img.replaceWith('<span>不能预览</span>');
  120.                     return;
  121.                 }
  122.                 $img.attr('src', src);
  123.             }, thumbnailWidth, thumbnailHeight);
  124.         });
  126.         // 文件上传过程中创建进度条实时显示。  uploadProgress事件：上传过程中触发，携带上传进度。 file：文件对象；percentage：传输进度 Nuber：类型
  127.         uploader.on('uploadProgress', function(file, percentage){
  128.             console.log(file);
  129.             console.log(percentage);
  130.             var $li = $('#'+file.id),
  131.                 $percent = $li.find('.progress span');
  133.             // 避免重复创建
  134.             if (!$percent.length) {
  135.                 $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
  136.             }
  137.             $percent.css('width', percentage * 100 + '%');
  138.         });
  140.         // 文件上传成功时候触发，给item添加成功class, 用样式标记上传成功。 file：文件对象，    response：服务器返回数据
  141.         uploader.on('uploadSuccess', function(file,res) {
  142.             $('#'+file.id).addClass('upload-state-done');
  143.             $("#upInfo").html("<font color='red'>"+res._raw+"</font>");
  144.             $successImgList.append('<img class="suc-img-item" src="'+res.realPathList[0]+'">');
  145.         });
  147.         // 文件上传失败                                file:文件对象 ， code：出错代码
  148.         uploader.on('uploadError', function(file,code) {
  149.             var $li = $( '#'+file.id ),
  150.                 $error = $li.find('div.error');
  152.             // 避免重复创建
  153.             if(!$error.length) {
  154.                 $error = $('<div class="error"></div>').appendTo($li);
  155.             }
  156.             $error.text('上传失败!');
  157.         });
  159.         // 不管成功或者失败，文件上传完成时触发。 file： 文件对象
  160.         uploader.on('uploadComplete', function( file ) {
  161.             $('#'+file.id ).find('.progress').remove();
  162.         });
  164.         //绑定提交事件
  165.         $("#btn").click(function() {
  166.             console.log("上传...");
  167.             uploader.upload();   //执行手动提交
  168.             console.log("上传成功");
  169.         });
  171.     });
  172. </script>
  173. </body>
  174. </html>

复制代码

效果图：

1048036-20171102191133498-1922857900.jpg

四、查看文件服务器Tomcat下上传的文件

1048036-20171102192126201-1387197089.jpg

发表评论

表情：
评论列表 （有 0 条评论，578人围观）

还没有评论，来说两句吧...

相关阅读