SpringMVC上传图片总结（1）---常规方法进行图片上传，使用了MultipartFile、MultipartHttpServletRequest-白红宇

SpringMVC上传图片总结（1）---常规方法进行图片上传，使用了MultipartFile、MultipartHttpServletRequest

阅读量：2383 次

发布时间：2019-05-10

本文共 23908 字，大约阅读时间需要 79 分钟。

SpringMVC上传图片总结（1）---常规方法进行图片上传，使用了MultipartFile、MultipartHttpServletRequest

1、web.xml配置，这里主要配置全局的拦截器过滤器等等，常规配置，与其他项目相同，有删减，根据自己的项目情况来定。


   
   
         
    
             
     
      org.springframework.web.context.ContextLoaderListener
         
           
    
             
     
      logFilter
             
     
      com.ourchem.web.filter.LogFilter
         
           
    
             
     
      logFilter
             
     
      *.do
         
        
    
             
     
      logFilter
             
     
      /j_spring_security_check
         
        
    
             
     
      logFilter
             
     
      /j_spring_security_logout
         
        
        
    
             
     
      springSecurityFilterChain
             
     
      org.springframework.web.filter.DelegatingFilterProxy
         
        
    
             
     
      springSecurityFilterChain
             
     
      /*
         
        
        
    
             
     
      encodingFilter
             
     
      org.springframework.web.filter.CharacterEncodingFilter
             
     
                  
      
       encoding
                  
      
       UTF-8
              
             
     
                  
      
       forceEncoding
                  
      
       false
              
         
        
    
             
     
      encodingFilter
             
     
      /*
         
        
        
    
             
     
      spring-mvc
             
     
      org.springframework.web.servlet.DispatcherServlet
             
     
                  
      
       contextConfigLocation
                  
      
       classpath:springmvc-servlet.xml
              
             
     
      1
         
        
    
             
     
      spring-mvc
             
             
     
      *.do
         
        
    
             
     
      60
         
        
    
             
     
      /WEB-INF/jsp/index.jsp
             
     
      /index.jsp
         
        
    
               
     
      404
               
     
      /WEB-INF/jsp/404.jsp
           
        
    
               
     
      500
               
     
      /WEB-INF/jsp/500.jsp

2、springmvc-servlet.xml配置，这里主要配置springmvc解析器CommonsMultipartResolver等等，这里主要是配置文件上传解析器。

10485760

3、文件上传jsp页面 upload.jsp，上传页面与图片回显页面。

情况一：input标签的name属性全都相同

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%><%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
   
    <%@ include file="/common/common.jsp"%>
    ${projectName }一上传文件<%@ include file="/common/include.jsp" %>
    
     
          <%@ include file="/common/head.jsp" %>   
      
                        
       
        上传文件          
        
                        
         
          返回上传                    
          
                                          
           
            
                                上传文件3：
                                
                                            
            上传结果（单个文件）：
                
                
                            <%-- 
              --%>
                            
            上传结果（多个文件）：
                
            
                                  
                                             <%@include file="/common/bottom.jsp" %>

情况二【多文件上传】：input标签name属性值各不相同，文件上传jsp页面 upload.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%><%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
   
    <%@ include file="/common/common.jsp"%>
    ${projectName }一上传文件<%@ include file="/common/include.jsp" %>
    
     
          <%@ include file="/common/head.jsp" %>   
      
                       
       
        上传文件         
        
                      
         
          返回上传                  
          
                                         
           
             上传文件1：
            
            
            
            
                  上传文件2：
            
            
            
            
                  上传文件3：
                              
                                        
            上传结果（多个文件）：
              
            
                               
                                        <%@include file="/common/bottom.jsp" %>

4、文件上传controller控制器

/*** 单个文件上传，方式一，使用MultipartFile作为方法参数接收传入的文件* 用 transferTo方法来保存图片，保存到本地磁盘。*     * @RequestParam("file")中的file对应input标签中的name属性值      * @author chunlynn     */    @RequestMapping("upload")    public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request, ModelMap model) {        // 先判断文件是否为空         if (!file.isEmpty()) {            // 获得原始文件名            String fileName = file.getOriginalFilename();            // 重命名文件            String newfileName = new Date().getTime() + String.valueOf(fileName);            //获得物理路径webapp所在路径            /**             * request.getSession().getServletContext().getRealPath("/")表示当前项目的根路径，如             * D:\Workspaces\eclipse_luna\.metadata\.plugins\org.eclipse.wst.server.core\tmp3\wtpwebapps\sky\             */            String pathRoot = request.getSession().getServletContext().getRealPath("");            // 项目下相对路径            String path = FILE_PATH + newfileName;            // 创建文件实例            File tempFile = new File(pathRoot + path);            // 判断父级目录是否存在，不存在则创建            if (!tempFile.getParentFile().exists()) {                tempFile.getParentFile().mkdir();            }            // 判断文件是否存在，否则创建文件（夹）            if (!tempFile.exists()) {                tempFile.mkdir();            }            try {                // 将接收的文件保存到指定文件中                file.transferTo(tempFile);            } catch (IllegalStateException e) {                e.printStackTrace();            } catch (IOException e) {                e.printStackTrace();            }            // 方法一：model属性也行            model.addAttribute("fileUrl", path); //保存路径，用于jsp页面回显            // 方法二：Request域属性也行，两个二选一即可。            // request.setAttribute("fileUrl", path);        }// getWiewPath方法里就处理了一些路径，相当于转发forward，返回 return "cms/notices/upload";        return getViewPath("upload"); // 转发到upload.jsp页面    }    @RequestMapping("/toUpload")    public String toUpload() {        // 相当于转发forward，转发到cms/notices/upload.jsp页面,框架会找到该逻辑视图名对应的 View并渲染          return getViewPath("upload");    }    /**     * 单文件上传，方式二，利用MultipartHttpServletRequest来解析request中的文件* 用 transferTo方法来保存图片，保存到本地磁盘。* 普通request是无法解析请求中的文件的。     *  MultipartHttpServletRequest是springmvc框架中的一个接口，默认实现类是DefaultMultipartHttpServletRequest     * @author chunlynn     */    @RequestMapping("upload2")    public String upload2(HttpServletRequest request, HttpServletResponse response, ModelMap model) {        // 先实例化一个文件解析器        CommonsMultipartResolver coMultipartResolver = new CommonsMultipartResolver(request.getSession()                .getServletContext());        // 判断request请求中是否有文件上传        if (coMultipartResolver.isMultipart(request)) {            // 转换request            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;            // 获得文件            MultipartFile file = multiRequest.getFile("file");            if (!file.isEmpty()) {                // 获得原始文件名                String fileName = file.getOriginalFilename();                String newfileName = new Date().getTime() + String.valueOf(fileName);                //获得物理路径webapp所在路径                String pathRoot = request.getSession().getServletContext().getRealPath("");                // 项目下相对路径                String path = FILE_PATH + newfileName;                // 创建文件实例                File tempFile = new File(pathRoot + path); //文件保存路径为pathRoot + path                if (!tempFile.getParentFile().exists()) {                    tempFile.getParentFile().mkdir();                }                if (!tempFile.exists()) {                    tempFile.mkdir();                }                try {                    // Transfer the received file to the given destination file.                     file.transferTo(tempFile);                } catch (IllegalStateException e) {                    e.printStackTrace();                } catch (IOException e) {                    e.printStackTrace();                }                // 方法一：model属性也行                model.addAttribute("fileUrl", path); //保存路径，用于jsp页面回显                // 方法二：Request域属性也行，两个二选一即可。                // request.setAttribute("fileUrl", path); //保存路径，用于jsp页面回显            }        }        return getViewPath("upload");    }/**     * 多文件上传，方式一：利用MultipartFile[]作为方法的参数接收传入的文件     *  用 transferTo方法来保存图片，保存到本地磁盘。     * @author chunlynn     */    @RequestMapping("upload3")    public String upload3(@RequestParam("file") MultipartFile[] files, HttpServletRequest request,            HttpServletResponse response, ModelMap model) {        List
   
     fileUrlList = new ArrayList
    
     (); //用来保存文件路径，用于jsp页面回显用        String path = "";        // 先判断文件files不为空        if (files != null && files.length > 0) {            for (MultipartFile file : files) { //循环遍历，取出单个文件，下面的操作和单个文件就一样了                if (!file.isEmpty()) {//这个判断必须加上                    // 获得原始文件名                    String fileName = file.getOriginalFilename();                    String newfileName = new Date().getTime() + String.valueOf(fileName);                    //获得物理路径webapp所在路径                    String pathRoot = request.getSession().getServletContext().getRealPath("");                    // 项目下相对路径                    path = FILE_PATH + newfileName;                    // 创建文件实例                    File tempFile = new File(pathRoot + path); //文件保存路径为pathRoot + path                    if (!tempFile.getParentFile().exists()) { /这个判断必须加上                        tempFile.getParentFile().mkdir();                    }                    if (!tempFile.exists()) {                        tempFile.mkdir();                    }                    try {                        // Transfer the received file to the given destination file.                         file.transferTo(tempFile);                    } catch (IllegalStateException e) {                        e.printStackTrace();                    } catch (IOException e) {                        e.printStackTrace();                    }                    fileUrlList.add(path);                }            }            // 方法一：model属性保存图片路径也行            model.addAttribute("fileUrlList", fileUrlList); //保存路径，用于jsp页面回显            // 方法二：request域属性保存图片路径也行，两个二选一即可。            // request.setAttribute("fileUrlList", fileUrlList); //保存路径，用于jsp页面回显        }        return getViewPath("upload");    }/**     * 多文件上传，方式二：利用MultipartHttpServletRequest来解析Request中的文件     *        * 用 transferTo方法来保存图片，保存到本地磁盘。     * @author chunlynn     */    @RequestMapping("upload4")    public String upload4(HttpServletRequest request, HttpServletResponse response, ModelMap model) {        // 先实例化一个文件解析器        CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession()                .getServletContext());        // 判断request请求中是否有文件上传        if (coMultiResolver.isMultipart(request)) {            List
     
       fileUrlList = new ArrayList
      
       (); //用来保存文件路径，用来jsp页面遍历回显                         // 转换Request            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;            // 获得文件，方式一            List
       
         files = multiRequest.getFiles("file");            for (MultipartFile file : files) { //循环遍历，取出单个文件，下面的操作和单个文件就一样了                if (!file.isEmpty()) { //这个判断必须要加                    // 获得原始文件名                    String fileName = file.getOriginalFilename();                    String newfileName = new Date().getTime() + String.valueOf(fileName);                    //获得物理路径webapp所在路径                    String pathRoot = request.getSession().getServletContext().getRealPath("");                    // 项目下相对路径                    String path = FILE_PATH + newfileName;                    // 创建文件实例                    File tempFile = new File(pathRoot + path); //文件保存路径为pathRoot + path                    if (!tempFile.getParentFile().exists()) {                        tempFile.getParentFile().mkdir();                    }                    if (!tempFile.exists()) {                        tempFile.mkdir();                    }                    try {                        file.transferTo(tempFile);                    } catch (IllegalStateException e) {                        e.printStackTrace();                    } catch (IOException e) {                        e.printStackTrace();                    }                    fileUrlList.add(path);                }            }            // 方法一：model属性保存图片路径也行            model.addAttribute("fileUrlList", fileUrlList); //保存路径，用于jsp页面回显            // 方法二：request域属性保存图片路径也行，两个二选一即可。            // request.setAttribute("fileUrlList", fileUrlList); //保存路径，用于jsp页面回显        }        return getViewPath("upload");    }/**     * 多文件上传，方式三：利用MultipartHttpServletRequest来解析Request中的文件，用流的方式将文件存到磁盘     *        *  使用流来存图片，保存到本地磁盘。     *       * @author chunlynn     */    @RequestMapping("upload5")    public String upload5(HttpServletRequest request, HttpServletResponse response, ModelMap model) {        // 先实例化一个文件解析器        CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession()                .getServletContext());        // 判断request请求中是否有文件上传        if (coMultiResolver.isMultipart(request)) {            List
        
          fileUrlList = new ArrayList
         
          (); //用来保存文件路径            // 转换Request            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;            // 获得文件，方式一，input标签name属性值相同都为"file"            List
          
            files = multiRequest.getFiles("file");            for (MultipartFile file : files) { //循环遍历，取出单个文件，下面的操作和单个文件就一样了                if (!file.isEmpty()) { //这个判断必须要加                    // 获得原始文件名                    String fileName = file.getOriginalFilename();                    String newfileName = new Date().getTime() + String.valueOf(fileName);                    //获得物理路径webapp所在路径                    String pathRoot = request.getSession().getServletContext().getRealPath("");                    // 项目下相对路径                    String path = FILE_PATH + newfileName;                    try {                        //创建输出流，用流将文件保存到指定目录                        FileOutputStream fos = new FileOutputStream(pathRoot + path);                        // 获得输入流                        InputStream in = file.getInputStream();                        int len = 0;                        byte[] buffer = new byte[1024]; //创建缓冲区 1kB，byte表示一个字节B，1KB=1024B                        // Reads some number of bytes from the inputstream and stores them into the buffer array b.                         while ((len = in.read(buffer)) != -1) { // 如果不用缓存，会一个字节一个字节的写，这样影响效率，效率低下                            fos.write(buffer, 0, len); //每次1KB的方式写入                        }                        fos.flush();                        fos.close();                        in.close();                    } catch (FileNotFoundException e) {                        e.printStackTrace();                    } catch (IOException e) {                        e.printStackTrace();                    }                    fileUrlList.add(path);                }            }            // 方法一：model属性保存图片路径也行            model.addAttribute("fileUrlList", fileUrlList); //保存路径，用于jsp页面回显            // 方法二：request域属性保存图片路径也行，两个二选一即可。            // request.setAttribute("fileUrlList", fileUrlList); //保存路径，用于jsp页面回显        }        return getViewPath("upload");    }/**     * 多文件上传，方式三：利用MultipartHttpServletRequest来解析Request中的文件，用流的方式将文件存到磁盘     *        *  使用流来存图片，保存到本地磁盘。     *  jsp页面的input标签可以有不同的name属性值     *       * @author chunlynn     */    @RequestMapping("upload6")    public String upload6(HttpServletRequest request, HttpServletResponse response, ModelMap model) {        // 先实例化一个文件解析器        CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession()                .getServletContext());        // 判断request请求中是否有文件上传        if (coMultiResolver.isMultipart(request)) {            List
           
             fileUrlList = new ArrayList
            
             (); //用来保存文件路径            // 转换Request            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;            // 获得文件，方式二            // Return an java.util.Iterator of String objects containing the parameter names of the multipart files contained in this request.            // jsp页面的input标签可以有不同的name属性值            Iterator
             
               fileNames = multiRequest.getFileNames();            while (fileNames.hasNext()) { //循环遍历                MultipartFile file = multiRequest.getFile(fileNames.next()); //取出单个文件                if (!file.isEmpty()) { //这个判断必须要加，下面的操作和单个文件就一样了                    // 获得原始文件名                    String fileName = file.getOriginalFilename();                    String newfileName = new Date().getTime() + String.valueOf(fileName);                    //获得物理路径webapp所在路径                    String pathRoot = request.getSession().getServletContext().getRealPath("");                    // 项目下相对路径                    String path = FILE_PATH + newfileName;                    try {                        //创建输出流，用流将文件保存到指定目录                        FileOutputStream fos = new FileOutputStream(pathRoot + path);                        // 获得输入流                        InputStream in = file.getInputStream();                        int len = 0;                        byte[] buffer = new byte[1024]; //创建缓冲区 1kB，byte表示一个字节B，1KB=1024B                        // Reads some number of bytes from the inputstream and stores them into the buffer array b.                         while ((len = in.read(buffer)) != -1) { // 如果不用缓存，会一个字节一个字节的写，这样影响效率，效率低下                            fos.write(buffer, 0, len); //每次1KB的方式写入                        }                        fos.flush();                        fos.close();                        in.close();                    } catch (FileNotFoundException e) {                        e.printStackTrace();                    } catch (IOException e) {                        e.printStackTrace();                    }                    fileUrlList.add(path);                }            }            // 方法一：model属性保存图片路径也行            model.addAttribute("fileUrlList", fileUrlList); //保存路径，用于jsp页面回显            // 方法二：request域属性保存图片路径也行，两个二选一即可。            // request.setAttribute("fileUrlList", fileUrlList); //保存路径，用于jsp页面回显        }        return getViewPath("upload");    }    public static final String FILE_PATH = "/upload/chunlynn/"; //相对路径/**     * 单文件上传，利用MultipartHttpServletRequest来解析Request中的文件，用流的方式将文件存到数据库。     *        * 使用流来存图片，保存进数据库。保存进数据库的多半是用户头像之类的小图片，占用空间比较小的。一次一张。     * jsp页面的其他参数，可以通过request.getParameter()获取     *       * @author chunlynn     */    @RequestMapping("upload7")    public String upload7(HttpServletRequest request, HttpServletResponse response, ModelMap model) {        // 先实例化一个文件解析器        CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession()                .getServletContext());        // 判断request请求中是否有文件上传        if (coMultiResolver.isMultipart(request)) {            // 转换Request            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;            // 获得文件            MultipartFile file = multiRequest.getFile("file");            if (!file.isEmpty()) { //这个判断必须要加                try {                        // 举例，Notices就是一个普通的model类                    Notices notices = new Notices();                    notices.setCreateDate(new Date());                    notices.setPicPath("/upload/aaa.jpg");// jsp页面中的其他非文件类参数，直接request就可以获取到                    notices.setTitle(request.getParameter("title"));                    if (StringUtil.isNotEmpty(request.getParameter("isShowPic"))) {                        notices.setIsShowPic(1);                    } else {                        notices.setIsShowPic(0);                    }                    notices.setIsShowTitle(1);                    notices.setContent("这是内容content");                    // 获得输入流                    InputStream in = file.getInputStream();                    byte[] data = new byte[] {};                    data = inputStreamToByte(in);// 将文件保存到字节数组中                    notices.setLogo(data); // 将字节数组保存到对象中                    noticesService.save(notices); // 保存进数据库                    in.close();                } catch (FileNotFoundException e) {                    e.printStackTrace();                } catch (Exception e) {                    e.printStackTrace();                }            }        }        return getViewPath("upload");    }    /**     * 将文件保存到字节数组中     * This class implements an output stream in which the data is written into a byte array. * @author chunlynn     */    public byte[] inputStreamToByte(InputStream in) throws Exception {        // This class implements an output stream in which the data is written into a byte array.        ByteArrayOutputStream bos = new ByteArrayOutputStream(); // 输出流对象，用来接收文件流，然后写入一个字节数组中        int len;        byte[] buffer = new byte[1024]; //缓存1KB        while ((len = in.read(buffer)) != -1) {            bos.write(buffer, 0, len);        }        byte[] data = bos.toByteArray(); // 字节数组，输出流中的文件保存到字节数组        bos.close();        return data;    }    /**     * 该方法放在父类controller中     *  * @author chunlynn     */    protected String viewPath = "cms/notices"; //在本controller进行初始化    protected String getViewPath(String viewName) {        if (viewPath == null)            return viewName;        if (viewPath.endsWith(File.separator))            return viewPath + viewName;        return viewPath + File.separator + viewName;    }

1）、数对应数据库字段设计

2）、对应的bean：

private byte[] logo; //头像    public byte[] getLogo() {        return logo;    }    public void setLogo(byte[] logo) {        this.logo = logo;    }

3）、保存进数据库成功截图

4）、保存进数据库的图片，如何在页面上显示？

/** * 以字节数组保存在数据库里的图片，如要在jsp页面显示，则调用controller方法，该用户有头像则会显示，然后img标签的src中获得* 的是写在Reponse中的流 */
   
        
    
             
     
      " width="100px" height="100px"/>/**  * 获取用户logo  * @author chunlynn  */@RequestMapping(value = "/getUserLogo")public void getUserLogo(HttpServletRequest request, HttpServletResponse response) throws Exception {     Loginer loginer = (Loginer) request.getSession().getAttribute(Loginer.SESSION_KEY);     User user = userInfoService.getUserById(loginer.getId()); //获取当前用户对象     if (user != null) {         if (user.getLogo() != null) {             byte[] data = new byte[] {};             data = (byte[]) user.getLogo(); //获取当前用户对象中的logo数据，转为字节数组             response.setContentType("");             OutputStream outputStream = response.getOutputStream(); //response的输出流             for (int i = 0; i < data.length; i++) {                 outputStream.write(data[i]); //resp出字节流             }             outputStream.close(); //关闭输出流         }     }}

5、利用百度上传组件WebUploader进行上传，springmvc进行接收处理

更多详细内容，请参考本系列第二篇文章《》。

百度上传组件初始化时，

组件默认会生成一个隐藏的input标签，name属性值为“file”，且encType="multipart/form-data"。后台controller按上面springmvc处理方法接收文件即可。

=========================js文件=========================

$(function() {    var $ = jQuery,  // 展示图片列表的容器    $list = $('#fileList'),    // 优化retina, 在retina下这个值是2    ratio = window.devicePixelRatio || 1,    // 缩略图大小，像素*像素    thumbnailWidth = 100 * ratio,    thumbnailHeight = 100 * ratio,    // Web Uploader实例    uploader;        // 初始化Web Uploader    var uploader = WebUploader.create({        // 选完文件后，是否自动上传。        auto: true,        // swf文件路径        swf: basePath + '/scripts/webuploader/Uploader.swf',        // 文件接收服务端。        server: basePath + '/cms/notices/upload8.do',//fileVal : "file", // 指定input标签name的属性值                threads:'5',        //同时运行5个线程传输        fileNumLimit:'10',  //文件总数量只能选择10个         // 选择文件的按钮。可选。        // 内部根据当前运行是创建，可能是input元素，也可能是flash.//        pick: '#filePicker',                pick: { id:'#filePicker',  //选择文件的按钮                multiple:true },         // 只允许选择图片文件。        accept: {            title: 'Images',            extensions: 'gif,jpg,jpeg,bmp,png',            mimeTypes: 'image/*'        }    });        // 当有文件添加进来的时候，//监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。//PS: 这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。    uploader.on( 'fileQueued', function( file ) {        var $li = $(                '
   
    ' +                    '
    ' +                    '
    
     ' + file.name + '' +                ''                ),            $img = $li.find('img');// $list为容器jQuery实例          $list.append( $li );        // 创建缩略图, thumbnailWidth x thumbnailHeight 为 100 x 100        uploader.makeThumb( file, function( error, src ) { //webuploader方法             if ( error ) {                $img.replaceWith('
     不能预览');                return;            }             $img.attr( 'src', src );        }, thumbnailWidth, thumbnailHeight );    });   // 然后剩下的就是上传状态提示了，当文件 上传过程中, 上传成功，上传失败，上传完成// 都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。    // 文件上传过程中创建进度条实时显示。    uploader.on( 'uploadProgress', function( file, percentage ) {        var $li = $( '#'+file.id ),            $percent = $li.find('.progress span');        // 避免重复创建        if ( !$percent.length ) {            $percent = $('
     
      
      
')                    .appendTo( $li )                    .find('span');        }        $percent.css( 'width', percentage * 100 + '%' );    });    // 文件上传成功，给item添加成功class, 用样式标记上传成功。    uploader.on( 'uploadSuccess', function( file,response) {        $( '#'+file.id ).addClass('upload-state-done');            });    // 文件上传失败，现实上传出错。    uploader.on( 'uploadError', function( file ) {        var $li = $( '#'+file.id ),            $error = $li.find('div.error');        // 避免重复创建        if ( !$error.length ) {            $error = $('
      
       ').appendTo( $li );        }        $error.text('上传失败');    });    // 完成上传完了，成功或者失败，先删除进度条。    uploader.on( 'uploadComplete', function( file ) {        $( '#'+file.id ).find('.progress').remove();    });    //绑定提交事件    $("#btn").click(function() {        console.log("上传...");        uploader.upload();   //执行手动提交        console.log("上传成功");      });    });