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开发环境下的大文件分片上传的实例代码，希望对大家有所帮助