webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

注意:

1,webuploader上传组件会和jQuery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性;

enctype="multipart/form-data"

2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置!

<!-- 上传拦截，如最大上传值及最小上传值 -->
  <!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制
   <bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
     <property name="maxUploadSize">
       <value>1073741824</value>
      </property>
      <property name="maxInMemorySize">
        <value>1073741824</value>
      </property>
       <property name="defaultEncoding">
        <value>utf-8</value>
      </property>
  </bean>
  --> 

下面正式开始前后台代码开发:

1.在页面jsp文件中,调用webuploader组件的公共文件

<link rel="stylesheet" href="static/css/webuploader.css" rel="external nofollow" /> 

<script type="text/javascript" src="static/js/webuploader.js"></script>
    <script type="text/javascript" src="static/js/webuploader.min.js"></script>
    <script type="text/javascript" src="static/js/upload3.js"></script> 

页面上的控件代码:

<div id="uploader">
            <!--用来存放文件信息-->
            <div id="thelist"></div>
            <div>
              <div id="attach"></div>
              <!-- <input type="button" value="上传" id="upload"/> -->
            </div>
          </div> 

因为我用的是自动上传,所以注释了上传按钮,upload3.js里也注释了相对的上传按钮的点击方法.

2.真正的上传组件代码是upload3.js,里面介绍了webuploader的初始化,分片,各种参数,具体可以参考官网上的API

/*********************************WebUpload 单文件上传 begin*****************************************/
$(function(){
  var $list = $("#thelist");
  var uploader ;// 实例化
  uploader = WebUploader.create({
      auto:true, //是否自动上传
      pick: {
        id: '#attach',
        name:"multiFile", //这个地方 name 没什么用，和fileVal 配合使用。
        label: '点击选择文件,会自动上传',
        multiple:false //默认为true，true表示可以多选文件，HTML5的属性
      },
      swf: '../Uploader.swf', //在这里必需要引入swf文件，webuploader初始化要用
      fileVal:'multiFile', //提交到到后台，是要用"multiFile"这个名称属性来取文件的
      server: "myPractice/webUploader.do",
      duplicate:true,//是否可重复选择同一文件
      resize: false,
      chunked: true, //分片处理
      chunkSize: 20 * 1024 * 1024, //每片20M
      chunkRetry:2,//如果失败，则不重试
      threads:1,//上传并发数。允许同时最大上传进程数。
      fileNumLimit:1,//上传的文件总数
      // 禁掉全局的拖拽功能。
      disableGlobalDnd: true
    });
    // 当有文件添加进来的时候
    uploader.on( "fileQueued", function( file ) {
      console.log("fileQueued:");
      $list.append( "<div id='"+ file.id + "' class='item'>" +
        "<h4 class='info'>" + file.name + "</h4>" +
        "<p class='state'>正在上传...</p>" +
      "</div>" );
    });
    //当所有文件上传结束时触发
    uploader.on("uploadFinished",function(){
      console.log("uploadFinished:");
    })
    //当文件上传成功时触发。
    uploader.on( "uploadSuccess", function( file ,response) {
//     alert(file.name);
      $( "#"+file.id ).find("p.state").text("已上传");
    });
    uploader.on( "uploadError", function( file ) {
      $( "#"+file.id ).find("p.state").text("上传出错");
      uploader.cancelFile(file);
      uploader.removeFile(file,true);
      uploader.reset();
    });
    //如果是手动上传,用下面的事件,并启用jsp页面上的上传按钮
//    $("#upload").on("click", function() {
//      uploader.upload();
//    })
});
/*********************************WebUpload 单文件上传 end*******************************************/ 

3.前台完毕之后,需要找到后台Java代码,实现上传到服务器的功能,webuploader组件中server属性就是指向服务端代码:

@Controller
@RequestMapping(value="/myPractice")<span style="font-family: Arial, Helvetica, sans-serif;">//这里就是表明上传组件怎么通过server属性找到后端代码的,不要太在意细节</span>
public class MyPracticeController extends BaseController {
<span> </span>
@RequestMapping(method = {RequestMethod.POST}, value = {"/webUploader"})
@ResponseBody
public void webUploader(HttpServletRequest request, HttpServletResponse response) throws Exception {
  try {
      boolean isMultipart = ServletFileUpload.isMultipartContent(request);
      if (isMultipart) {
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        // 得到所有的表单域，它们目前都被当作FileItem
        List<FileItem> fileItems = upload.parseRequest(request);
        String id = "";
        String fileName = "";
        // 如果大于1说明是分片处理
        int chunks = 1;
        int chunk = 0;
        FileItem tempFileItem = null;
        for (FileItem fileItem : fileItems) {
          if (fileItem.getFieldName().equals("id")) {
            id = fileItem.getString();
          } else if (fileItem.getFieldName().equals("name")) {
            fileName = new String(fileItem.getString().getBytes("ISO-8859-1"), "UTF-8");
          } else if (fileItem.getFieldName().equals("chunks")) {
            chunks = NumberUtils.toInt(fileItem.getString());
          } else if (fileItem.getFieldName().equals("chunk")) {
            chunk = NumberUtils.toInt(fileItem.getString());
          } else if (fileItem.getFieldName().equals("multiFile")) {
            tempFileItem = fileItem;
          }
        }
        //session中的参数设置获取是我自己的原因,文件名你们可以直接使用fileName,这个是原来的文件名
        String fileSysName = this.getRequest().getSession().getAttribute("fileSysName").toString();
        String realname = fileSysName+fileName.substring(fileName.lastIndexOf("."));//转化后的文件名
        this.getRequest().getSession().setAttribute("realname",realname);
        String filePath = Const.VIDEOPATHFILE + "sound/";//文件上传路径
        // 临时目录用来存放所有分片文件
        String tempFileDir = filePath + id;
        File parentFileDir = new File(tempFileDir);
        if (!parentFileDir.exists()) {
          parentFileDir.mkdirs();
        }
        // 分片处理时，前台会多次调用上传接口，每次都会上传文件的一部分到后台
        File tempPartFile = new File(parentFileDir, realname + "_" + chunk + ".part");
        FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(), tempPartFile);
        // 是否全部上传完成
        // 所有分片都存在才说明整个文件上传完成
        boolean uploadDone = true;
        for (int i = 0; i < chunks; i++) {
          File partFile = new File(parentFileDir, realname + "_" + i + ".part");
          if (!partFile.exists()) {
            uploadDone = false;
          }
        }
        // 所有分片文件都上传完成
        // 将所有分片文件合并到一个文件中
        if (uploadDone) {
          // 得到 destTempFile 就是最终的文件
          File destTempFile = new File(filePath, realname);
          for (int i = 0; i < chunks; i++) {
            File partFile = new File(parentFileDir, realname + "_" + i + ".part");
            FileOutputStream destTempfos = new FileOutputStream(destTempFile, true);
            //遍历"所有分片文件"到"最终文件"中
            FileUtils.copyFile(partFile, destTempfos);
            destTempfos.close();
          }
          // 删除临时目录中的分片文件
          FileUtils.deleteDirectory(parentFileDir);
        } else {
          // 临时文件创建失败
          if (chunk == chunks -1) {
            FileUtils.deleteDirectory(parentFileDir);
          }
        }
      }
    } catch (Exception e) {
      logger.error(e.getMessage(), e);
    }
} 

到这里基本完了,webuploader前后台设计的代码就这些,

Uploader.swf

<pre name="code" class="html">webuploader.min.js</pre><pre name="code" class="html"><pre name="code" class="html">webuploader.js</pre><pre name="code" class="html">webuploader.css</pre><pre name="code" class="html">这4个公共文件从官网可以下载,都一样.
<pre name="code" class="plain">最后,文件上传后页面样式是</pre><pre name="code" class="plain"><pre name="code" class="html"><img src="http://img.blog.csdn.net/20170418112230338?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ2xvbmcxOTkwNDIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
</pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<p></p>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre></pre></pre> 

以上所述是小编给大家介绍的webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！