webuploader在springMVC+jquery+Java開發(fā)環(huán)境下的大文件分片上傳的實(shí)例代碼

更新時(shí)間：2017年04月18日 11:34:14 作者：wanglong1990421

這篇文章主要介紹了webuploader在springMVC+jquery+Java開發(fā)環(huán)境下的大文件分片上傳的實(shí)例代碼,需要的朋友可以參考下

注意:

1,webuploader上傳組件會(huì)和jQuery自帶的上傳組件沖突,所以不要使用<form>標(biāo)簽中添加上傳文件的屬性;

enctype="multipart/form-data"

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

<!-- 上傳攔截，如最大上傳值及最小上傳值 --> 
  <!--新增加的webuploader上傳組件,必須要屏蔽這里的攔截機(jī)制 
   <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>  
  -->

下面正式開始前后臺(tái)代碼開發(fā):

1.在頁面jsp文件中,調(diào)用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>

因?yàn)槲矣玫氖亲詣?dòng)上傳,所以注釋了上傳按鈕,upload3.js里也注釋了相對(duì)的上傳按鈕的點(diǎn)擊方法.

2.真正的上傳組件代碼是upload3.js,里面介紹了webuploader的初始化,分片,各種參數(shù),具體可以參考官網(wǎng)上的API

/*********************************WebUpload 單文件上傳 begin*****************************************/ 
$(function(){ 
  var $list = $("#thelist"); 
  var uploader ;// 實(shí)例化   
  uploader = WebUploader.create({  
      auto:true, //是否自動(dòng)上傳 
      pick: { 
        id: '#attach', 
        name:"multiFile", //這個(gè)地方 name 沒什么用，和fileVal 配合使用。 
        label: '點(diǎn)擊選擇文件,會(huì)自動(dòng)上傳', 
        multiple:false //默認(rèn)為true，true表示可以多選文件，HTML5的屬性 
      }, 
      swf: '../Uploader.swf', //在這里必需要引入swf文件，webuploader初始化要用 
      fileVal:'multiFile', //提交到到后臺(tái)，是要用"multiFile"這個(gè)名稱屬性來取文件的 
      server: "myPractice/webUploader.do", 
      duplicate:true,//是否可重復(fù)選擇同一文件 
      resize: false, 
      chunked: true, //分片處理 
      chunkSize: 20 * 1024 * 1024, //每片20M 
      chunkRetry:2,//如果失敗，則不重試 
      threads:1,//上傳并發(fā)數(shù)。允許同時(shí)最大上傳進(jìn)程數(shù)。 
      fileNumLimit:1,//上傳的文件總數(shù) 
      // 禁掉全局的拖拽功能。 
      disableGlobalDnd: true 
    });  
    // 當(dāng)有文件添加進(jìn)來的時(shí)候 
    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>" ); 
    }); 
    //當(dāng)所有文件上傳結(jié)束時(shí)觸發(fā) 
    uploader.on("uploadFinished",function(){ 
      console.log("uploadFinished:"); 
    }) 
    //當(dāng)文件上傳成功時(shí)觸發(fā)。 
    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("上傳出錯(cuò)"); 
      uploader.cancelFile(file); 
      uploader.removeFile(file,true); 
      uploader.reset(); 
    }); 
    //如果是手動(dòng)上傳,用下面的事件,并啟用jsp頁面上的上傳按鈕 
//    $("#upload").on("click", function() { 
//      uploader.upload(); 
//    }) 
}); 
/*********************************WebUpload 單文件上傳 end*******************************************/

3.前臺(tái)之后,需要找到后臺(tái)Java代碼,實(shí)現(xiàn)上傳到服務(wù)器的功能,webuploader組件中server屬性就是指向服務(wù)端代碼:

@Controller 
@RequestMapping(value="/myPractice")<span style="font-family: Arial, Helvetica, sans-serif;">//這里就是表明上傳組件怎么通過server屬性找到后端代碼的,不要太在意細(xì)節(jié)</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); 
        // 得到所有的表單域，它們目前都被當(dāng)作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中的參數(shù)設(shè)置獲取是我自己的原因,文件名你們可以直接使用fileName,這個(gè)是原來的文件名 
        String fileSysName = this.getRequest().getSession().getAttribute("fileSysName").toString(); 
        String realname = fileSysName+fileName.substring(fileName.lastIndexOf("."));//轉(zhuǎn)化后的文件名 
        this.getRequest().getSession().setAttribute("realname",realname); 
        String filePath = Const.VIDEOPATHFILE + "sound/";//文件上傳路徑 
        // 臨時(shí)目錄用來存放所有分片文件 
        String tempFileDir = filePath + id; 
        File parentFileDir = new File(tempFileDir); 
        if (!parentFileDir.exists()) { 
          parentFileDir.mkdirs(); 
        } 
        // 分片處理時(shí)，前臺(tái)會(huì)多次調(diào)用上傳接口，每次都會(huì)上傳文件的一部分到后臺(tái) 
        File tempPartFile = new File(parentFileDir, realname + "_" + chunk + ".part"); 
        FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(), tempPartFile); 
        // 是否全部上傳完成 
        // 所有分片都存在才說明整個(gè)文件上傳完成 
        boolean uploadDone = true; 
        for (int i = 0; i < chunks; i++) { 
          File partFile = new File(parentFileDir, realname + "_" + i + ".part"); 
          if (!partFile.exists()) { 
            uploadDone = false; 
          } 
        } 
        // 所有分片文件都上傳完成 
        // 將所有分片文件合并到一個(gè)文件中 
        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(); 
          } 
          // 刪除臨時(shí)目錄中的分片文件 
          FileUtils.deleteDirectory(parentFileDir); 
        } else { 
          // 臨時(shí)文件創(chuàng)建失敗 
          if (chunk == chunks -1) { 
            FileUtils.deleteDirectory(parentFileDir); 
          } 
        } 
      } 
    } catch (Exception e) { 
      logger.error(e.getMessage(), e); 
    } 
}

到這里基本完了,webuploader前后臺(tái)設(shè)計(jì)的代碼就這些,

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個(gè)公共文件從官網(wǎng)可以下載,都一樣.
<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開發(fā)環(huán)境下的大文件分片上傳的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！