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

寫(xiě)在前面：

成都創(chuàng)新互聯(lián)公司是專業(yè)的襄州網(wǎng)站建設(shè)公司，襄州接單;提供成都網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行襄州網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

文件上傳方式很多的，對(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 >
<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ù)流程也不同，故可以先入門(mén)，后續(xù)根據(jù)自己的需求，進(jìn)行添加的。

運(yùn)行截圖：

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

之后繼續(xù)整理實(shí)現(xiàn)分片斷點(diǎn)上傳的文章。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題：使用WebUploader實(shí)現(xiàn)上傳文件功能（一）
文章來(lái)源：http://bm7419.com/article38/jciisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站內(nèi)鏈、網(wǎng)站營(yíng)銷、網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化