使用WebUploader實(shí)現(xiàn)上傳文件功能（一）

更新時(shí)間：2018年01月26日 16:07:18 作者：蚊蚊蚊蚊蚊170624

這篇文章主要為大家詳細(xì)介紹了使用WebUploader實(shí)現(xiàn)上傳文件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

寫(xiě)在前面：

　　文件上傳方式很多的，對(duì)于大文件的上傳，在本次項(xiàng)目中也有涉及，主要是用了分片斷點(diǎn)上傳大文件。所以就去了解了一下WebUploader，先從簡(jiǎn)單的上傳文件開(kāi)始吧。

　　在代碼中寫(xiě)注釋，這樣看的比較好點(diǎn)，那就直接上代碼來(lái)看了解實(shí)現(xiàn)的過(guò)程吧。

前臺(tái)jsp頁(yè)面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String scheme = request.getScheme();
  String serverName = request.getServerName();
  String contextPath = request.getContextPath();
  int port = request.getServerPort();

  //網(wǎng)站的訪問(wèn)跟路徑
  String baseURL = scheme + "://" + serverName + ":" + port
      + contextPath;
  request.setAttribute("baseURL", baseURL);
%>
<html>
<head>
  <title>WebUploader文件上傳簡(jiǎn)單示例</title>
  <%--引入css樣式--%>
  <link href="${baseURL}/webuploader0.1.5/webuploader.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
  <script src="${baseURL}/ligerui2/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
  <%--引入文件上傳插件--%>
  <script type="text/javascript" src="${baseURL}/webuploader0.1.5/webuploader.min.js"></script>

  <script type="text/javascript">

      $(function(){
        /*
        對(duì)于uploader的創(chuàng)建，最好等dom元素也就是下面的div創(chuàng)建好之后再創(chuàng)建，因?yàn)槔锩嬗杏玫竭x擇文件按鈕，
        不然會(huì)創(chuàng)建報(bào)錯(cuò)，這是很容易忽視的地方，故這里放到$(function(){}來(lái)進(jìn)行創(chuàng)建*/
        var uploader = WebUploader.create({

          // swf文件路徑
          swf: '${baseURL}/webuploader0.1.5/Uploader.swf',
          // 文件接收服務(wù)端。
          server: '${baseURL}/uploadFile',
          // [默認(rèn)值：'file'] 設(shè)置文件上傳域的name。
          fileVal:'upload',
          // 選擇文件的按鈕?？蛇x。
          // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.
          pick:
            {
              multiple: false,
              id: '#filePicker'
            },

          // 上傳并發(fā)數(shù)。允許同時(shí)最大上傳進(jìn)程數(shù)[默認(rèn)值：3]  即上傳文件數(shù)
          threads: 1,
          // 自動(dòng)上傳修改為手動(dòng)上傳
          //auto: true,
          //是否要分片處理大文件上傳。
          //chunked: true,
          // 如果要分片，分多大一片？ 默認(rèn)大小為5M.
          //chunkSize: 5 * 1024 * 1024,
          // 不壓縮image, 默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！
          //resize: false
        });




        //當(dāng)有文件添加進(jìn)來(lái)的時(shí)候
        uploader.on('fileQueued', function (file) {

          //具體邏輯根據(jù)項(xiàng)目需求來(lái)寫(xiě) 這里只是簡(jiǎn)單的舉個(gè)例子寫(xiě)下
          $one = $("<div >"+file.name+"</div>");
          $("#fileList").append($one);

          });



        // 文件上傳過(guò)程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。
        uploader.on('uploadProgress', function (file, percentage) {
          // 具體邏輯...
        });

        // 文件上傳成功處理。
        uploader.on('uploadSuccess', function (file, response) {
          // 具體邏輯...
          console.log('upload success...\n');
        });
        // 文件上傳失敗處理。
        uploader.on('uploadError', function (file) {
          // 具體邏輯...
        });
        // 上傳傳完畢，不管成功失敗都會(huì)調(diào)用該事件，主要用于關(guān)閉進(jìn)度條
        uploader.on('uploadComplete', function (file) {
          // 具體邏輯...
        });


        //點(diǎn)擊上傳按鈕觸發(fā)事件
        $("#btnClick").click(function(){
          uploader.upload();
        });

      });


  </script>

</head>
<body style="padding:10px">
<div id="layout1">
  <div id="uploader-demo">
    <%--用來(lái)裝 顯示上傳文件名稱的div--%>
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker" >選擇文件</div>
    <button id="btnClick">開(kāi)始上傳</button>

  </div>
</div>
</body>
</html>

后臺(tái)action:

/**
 * Description:com.ims.action
 * Author: Eleven
 * Date: 2017/12/26 10:50
 */
@Controller("FileAction")
public class FileAction extends BaseAction{

  //記得提供對(duì)應(yīng)的get set方法
  //上傳文件對(duì)象(和表單type=file的name值一致，在jsp頁(yè)面我們指定了fileVal:'upload',)
  private File upload;
  //文件名
  private String uploadFileName;
  //上傳類型
  private String uploadContentType;
  

  public void uploadFile() throws Exception{

    String str = "D:/upload33/"; //文件保存路徑
    System.out.println("文件路徑===="+uploadFileName);
    String realPath = str + uploadFileName;
    File tmp =new File(realPath);
    FileUtils.copyFile(upload, tmp);
    System.out.println("上傳文件"+uploadFileName+",大?。?+(upload.length()/1024/1024)+"M");

  }
  

  public File getUpload() {
    return upload;
  }

  public void setUpload(File upload) {
    this.upload = upload;
  }

  public String getUploadFileName() {
    return uploadFileName;
  }

  public void setUploadFileName(String uploadFileName) {
    this.uploadFileName = uploadFileName;
  }

  public String getUploadContentType() {
    return uploadContentType;
  }

  public void setUploadContentType(String uploadContentType) {
    this.uploadContentType = uploadContentType;
  }
}

struts.xml文件的配置：

 <action name="uploadFile" class="FileAction" method="uploadFile">
 </action>

現(xiàn)在可以運(yùn)行了，這個(gè)只是用WebUploader來(lái)實(shí)現(xiàn)的一個(gè)最基本的文件上傳了。在jsp頁(yè)面跟后臺(tái)action中，都談不上有什么邏輯，也不是很完整。因?yàn)轫?xiàng)目不同，業(yè)務(wù)流程也不同，故可以先入門，后續(xù)根據(jù)自己的需求，進(jìn)行添加的。

運(yùn)行截圖：