欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript使用uploadify來(lái)實(shí)現(xiàn)多文件上傳

 更新時(shí)間：2016年11月16日 10:16:50   作者：hwt_211  
本篇文章主要介紹了Javascript使用uploadify來(lái)實(shí)現(xiàn)多文件上傳，具有一定的參考價(jià)值，有需要的可以了解一下。

使用uploadify來(lái)實(shí)現(xiàn)文件上傳能夠客戶端判斷文件大小、控制文件上傳的類型、實(shí)現(xiàn)多文件上傳、顯示進(jìn)度條等功能，方便易用，兼容性較好。

本例是把dwz中整合uploadify功能抽取出來(lái)的，可以進(jìn)行單獨(dú)使用，不一定要遭dwz中才能使用，本例只是為了測(cè)試，所以使用靜態(tài)頁(yè)面進(jìn)行測(cè)試：

話不多說(shuō)，代碼敬上：

2，html頁(yè)面的代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>MyHtml.html</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link href="resources/dwz/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen" /> 
<script src="resources/dwz/js/jquery-1.7.2.js" type="text/javascript"></script> 
<script src="resources/dwz/uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script> 
 <script src="resources/dwz/uploadify/scripts/errorCode.js" type="text/javascript"></script> 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<style type="text/css" media="screen"> 
.my-uploadify-button { 
  background: none; 
  border: none; 
  text-shadow: none; 
  border-radius: 0; 
} 
 
.uploadify:hover .my-uploadify-button { 
  background: none; 
  border: none; 
} 
 
.fileQueue { 
  width: 400px; 
  height: 150px; 
  overflow: auto; 
  border: 1px solid #E5E5E5; 
  margin-bottom: 10px; 
} 
</style> 
<script type="text/javascript"> 
  $(function(){ 
    $('#testFileInput').uploadify({ 
      swf:'resources/dwz/uploadify/scripts/uploadify.swf', 
      uploader:'servlet/uploadify.do',//上傳的url 
      formData:{PHPSESSID:'xxx', ajax:1}, 
      buttonText:'請(qǐng)選擇文件', 
      fileSizeLimit:'200KB',//設(shè)置上傳大小 
      fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;', 
      fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',//允許的后綴 
      auto:true,//是否自動(dòng)上傳 
      multi:true, 
      overrideEvents: ['onDialogClose', 'onUploadError', 'onSelectError' ],//重新錯(cuò)誤信息的顯示方法 
      onSelectError: uploadify_onSelectError, 
      onUploadError: uploadify_onUploadError, 
      onUploadSuccess: uploadify_onUploadSuccess 
    }); 
   
  $('#testFileInput2').uploadify({ 
      swf:'resources/dwz/uploadify/scripts/uploadify.swf', 
      uploader:'servlet/uploadify.do', 
      formData:{PHPSESSID:'xxx', ajax:1}, 
      queueID:'fileQueue', 
      buttonImage:'resources/dwz/uploadify/img/add.jpg', 
      buttonClass:'my-uploadify-button', 
      width:102, 
      auto:false, 
      fileSizeLimit:'100KB',    
      fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;',  
      fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',  
      overrideEvents: [ 'onDialogClose','onUploadError', 'onSelectError' ], 
      onSelectError: uploadify_onSelectError, 
      onUploadError: uploadify_onUploadError, 
      onUploadSuccess: uploadify_onUploadSuccess 
    }); 
  }); 
 
</script> 
</head> 
 
<body> 
    <!-- 單文件上傳 --> 
    <input id="testFileInput" type="file" name="image" /> 
    <div class="divider"></div> 
    <!-- 多文件上傳 --> 
    <input id="testFileInput2" type="file" name="image2" /> 
    <div id="fileQueue" class="fileQueue"></div> 
    <input type="image" src="resources/dwz/uploadify/img/upload.jpg" onclick="$('#testFileInput2').uploadify('upload', '*');" /> 
    <input type="image" src="resources/dwz/uploadify/img/cancel.jpg" onclick="$('#testFileInput2').uploadify('cancel', '*');" /> 
</body> 
</html>

3，上傳的servlet代碼

package uploadFile; 
 
import java.io.File; 
import java.io.IOException; 
import java.util.Iterator; 
import java.util.List; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import org.apache.commons.fileupload.FileItem; 
import org.apache.commons.fileupload.FileUploadException; 
import org.apache.commons.fileupload.disk.DiskFileItemFactory; 
import org.apache.commons.fileupload.servlet.ServletFileUpload; 
 
public class UploadFile extends HttpServlet { 
 
  @Override 
  protected void service(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    super.service(request, response); 
  } 
   
   
  @Override 
  protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException { 
    //臨時(shí)目錄 
    String basePath = req.getServletContext().getRealPath("upload"); 
    String tempDir = "temp"; 
     
    File tempFile = new File(basePath + File.separator +tempDir); 
    if (!tempFile.exists()) { 
      tempFile.mkdir(); 
    } 
     
    DiskFileItemFactory dfc = new DiskFileItemFactory(); 
    dfc.setSizeThreshold(1*1024*1024);//設(shè)置臨界值 
    dfc.setRepository(tempFile);//設(shè)置臨時(shí)上傳目錄 
     
    ServletFileUpload upload = new ServletFileUpload(dfc); 
    upload.setHeaderEncoding("UTF-8");//設(shè)置編碼 
    // 設(shè)置文件最大值,這里設(shè)置5Mb,5*1024*1024; 
    upload.setSizeMax(5 * 1024 * 1024); 
     
    try { 
      List fileList = upload.parseRequest(req); 
      Iterator<FileItem> iterator = fileList.iterator(); 
      while (iterator.hasNext()) { 
        FileItem item = iterator.next(); 
        String fileName = item.getName();//得到文件名 
        if (fileName != null) { 
        //System.out.println(fileName); 
        //System.out.println(item.getSize()); 
        File sourceFile = new File(basePath+File.separator+fileName); 
        item.write(sourceFile); 
        } 
      } 
    } catch (FileUploadException e) { 
      e.printStackTrace(); 
    } catch (Exception e) { 
      e.printStackTrace(); 
    } 
     
    //resp.getWriter().print("上傳成功！");  
  } 
   
   
  @Override 
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException { 
    super.doPost(req, resp); 
  } 
}

4，web.xml配置

<servlet> 
 <servlet-name>upLoadify</servlet-name> 
 <servlet-class>uploadFile.UploadFile</servlet-class> 
</servlet> 
<servlet-mapping> 
 <servlet-name>upLoadify</servlet-name> 
 <url-pattern>/servlet/uploadify.do</url-pattern> 
</servlet-mapping>

5，uploadify的提示信息是英文的，為了顯示中文的提示信息，將其錯(cuò)誤提示方法進(jìn)行重新，新建errorCode.js放入在resource/dwz/uploadify/scripts文件夾下面，并在頁(yè)面進(jìn)行導(dǎo)入這個(gè)js,js代碼如下：

var uploadify_onSelectError = function(file, errorCode, errorMsg) { 
    var msgText = "上傳失敗\n"; 
    switch (errorCode) { 
      case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: 
        //this.queueData.errorMsg = "每次最多上傳 " + this.settings.queueSizeLimit + "個(gè)文件"; 
        msgText += "每次最多上傳 " + this.settings.queueSizeLimit + "個(gè)文件"; 
        break; 
      case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: 
        msgText += "文件大小超過(guò)限制( " + this.settings.fileSizeLimit + " )"; 
        break; 
      case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: 
        msgText += "文件大小為0"; 
        break; 
      case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: 
        msgText += "文件格式不正確，僅限 " + this.settings.fileTypeExts; 
        break; 
      default: 
        msgText += "錯(cuò)誤代碼：" + errorCode + "\n" + errorMsg; 
    } 
    alert(msgText); 
  }; 
  
var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) { 
    // 手工取消不彈出提示 
    if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED 
        || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) { 
      return; 
    } 
    var msgText = "上傳失敗\n"; 
    switch (errorCode) { 
      case SWFUpload.UPLOAD_ERROR.HTTP_ERROR: 
        msgText += "HTTP 錯(cuò)誤\n" + errorMsg; 
        break; 
      case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL: 
        msgText += "上傳文件丟失，請(qǐng)重新上傳"; 
        break; 
      case SWFUpload.UPLOAD_ERROR.IO_ERROR: 
        msgText += "IO錯(cuò)誤"; 
        break; 
      case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR: 
        msgText += "安全性錯(cuò)誤\n" + errorMsg; 
        break; 
      case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: 
        msgText += "每次最多上傳 " + this.settings.uploadLimit + "個(gè)"; 
        break; 
      case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED: 
        msgText += errorMsg; 
        break; 
      case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: 
        msgText += "找不到指定文件，請(qǐng)重新操作"; 
        break; 
      case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED: 
        msgText += "參數(shù)錯(cuò)誤"; 
        break; 
      default: 
        msgText += "文件:" + file.name + "\n錯(cuò)誤碼:" + errorCode + "\n" 
            + errorMsg + "\n" + errorString; 
    } 
    alert(msgText); 
  } 
  // return parameters; 
//} 
  
  
var uploadify_onUploadSuccess = function(file, data, response) { 
  alert(file.name + "\n\n上傳成功"); 
};

收工！

原文鏈接：http://blog.csdn.net/hwt_211/article/details/36888763

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript控制網(wǎng)頁(yè)層收起和展開效果的方法

    JavaScript控制網(wǎng)頁(yè)層收起和展開效果的方法

    這篇文章主要介紹了JavaScript控制網(wǎng)頁(yè)層收起和展開效果的方法,涉及javascript操作網(wǎng)頁(yè)元素動(dòng)態(tài)效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-04-04
  • PHP使用方法重載實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建屬性的get和set方法

    PHP使用方法重載實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建屬性的get和set方法

    這篇文章主要介紹了PHP使用方法重載實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建屬性的get和set方法,使用本文方法可以在一個(gè)類中不用在寫大量的set方法或get方法,需要的朋友可以參考下
    2014-11-11
  • 10個(gè)最受歡迎的 JavaScript框架(推薦)

    10個(gè)最受歡迎的 JavaScript框架(推薦)

    這篇文章主要介紹了JavaScript框架特性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • JavaScript中文件上傳API詳解

    JavaScript中文件上傳API詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript中文件上傳API，介紹了上傳文件API的使用方法，感興趣的小伙伴們可以參考一下
    2016-04-04
  • 2019 年編寫現(xiàn)代 JavaScript 代碼的5個(gè)小技巧(小結(jié))

    2019 年編寫現(xiàn)代 JavaScript 代碼的5個(gè)小技巧(小結(jié))

    這篇文章主要介紹了2019 年編寫現(xiàn)代 JavaScript 代碼的5個(gè)小技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • JavaScript 中 avalon綁定屬性總結(jié)

    JavaScript 中 avalon綁定屬性總結(jié)

    avalon是前端MVVM框架，在js中經(jīng)常會(huì)用到。這篇文章主要介紹了JavaScript 中 avalon綁定屬性總結(jié)的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • JS實(shí)現(xiàn)的自定義右鍵菜單實(shí)例二則

    JS實(shí)現(xiàn)的自定義右鍵菜單實(shí)例二則

    這篇文章主要介紹了JS實(shí)現(xiàn)的自定義右鍵菜單,以兩則實(shí)例形式分析了javascript自定義右鍵菜單效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • webpack學(xué)習(xí)教程之publicPath路徑問(wèn)題詳解

    webpack學(xué)習(xí)教程之publicPath路徑問(wèn)題詳解

    這篇文章主要給大家介紹了webpack學(xué)習(xí)教程之publicPath路徑問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
    2017-06-06
  • 使用JavaScript實(shí)現(xiàn)alert的實(shí)例代碼

    使用JavaScript實(shí)現(xiàn)alert的實(shí)例代碼

    本文通過(guò)實(shí)例代碼給大家介紹了js實(shí)現(xiàn)alert的方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
    2017-07-07
  • jqgrid 表格數(shù)據(jù)導(dǎo)出實(shí)例

    jqgrid 表格數(shù)據(jù)導(dǎo)出實(shí)例

    jqgrid并沒(méi)有自帶導(dǎo)出表格數(shù)據(jù)的方法，這里就自己實(shí)現(xiàn)了一個(gè)，嘗試過(guò)在頁(yè)面直接將數(shù)據(jù)導(dǎo)出，發(fā)現(xiàn)只有IE下可以通過(guò)調(diào)用saveas來(lái)實(shí)現(xiàn)，但是別的瀏覽器不支持，于是考慮將數(shù)據(jù)傳回后臺(tái)，然后后臺(tái)返回下載文件來(lái)實(shí)現(xiàn)
    2013-11-11

最新評(píng)論