国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 開(kāi)發(fā) > Java > 正文

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

2024-07-13 10:17:21
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

寫(xiě)在前面:

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

  在代碼中寫(xiě)注釋?zhuān)@樣看的比較好點(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',          // 選擇文件的按鈕。可選。          // 內(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)裝 顯示上傳文件名稱(chēng)的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;  //上傳類(lèi)型  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,上傳文件

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持VeVb武林網(wǎng)。


注:相關(guān)教程知識(shí)閱讀請(qǐng)移步到JAVA教程頻道。
發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 慈利县| 台湾省| 赣榆县| 灌阳县| 射洪县| 吉林市| 田阳县| 新河县| 九台市| 巫溪县| 二手房| 宣武区| 通山县| 西畴县| 尚义县| 秀山| 荣昌县| 侯马市| 台前县| 乐山市| 南溪县| 石台县| 尉氏县| 包头市| 康定县| 封丘县| 汪清县| 阿拉善左旗| 屯昌县| 那坡县| 玉屏| 西充县| 会宁县| 盱眙县| 孟津县| 延寿县| 靖宇县| 兴宁市| 大理市| 阳原县| 平南县|