java 上傳檔案到伺服器之jquery.uploadify

阿新 • • 發佈：2019-01-11

基於jquery的檔案上傳控制元件，支援ajax無重新整理上傳，多個檔案同時上傳，上傳進行進度顯示，刪除已上傳檔案。

要求使用jquery1.4或以上版本，flash player 9.0.24以上。

有兩個版本，一個用flash,一個是html5。html5的需要付費~所以這裡只說flash版本的用法

1、jsp前端頁面和指令碼：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String dclb = request.getParameter("dclb");
String shi = request.getParameter("shi");
String xian = request.getParameter("xian");
String year = request.getParameter("year");
%>

<!DOCTYPE>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>災害資訊錄入</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="css/table.css">
	<link rel="stylesheet" type="text/css" href="css/jcsj/sjdr/sjdr.css">
	
	<!-- 框架 -->	
	<link rel="stylesheet" type="text/css" href="scripts/libs/uploadify/uploadify.css">
    <script type="text/javascript" src="scripts/libs/uploadify/jquery-2.2.1.min.js"></script> 
    <script type="text/javascript" src="scripts/libs/uploadify/jquery.uploadify.min.js"></script>  
	
	<!-- 業務 -->
	 <script type="text/javascript">  
    $(function(){  
        $("#uploadify").uploadify({
            'debug'     : false, //開啟除錯  
            'auto'           : false, //是否自動上傳     
            'swf'            : 'scripts/libs/uploadify/uploadify.swf',  //引入uploadify.swf    
            'uploader'       : '../../../jcsj/uploadFile',//請求路徑    
            'queueID'        : 'fileQueue',//佇列id,用來展示上傳進度的    
            'width'     : '75',  //按鈕寬度    
            'height'    : '24',  //按鈕高度  
            'cancelImg'      : 'scripts/libs/uploadify/cancel.png',
            'queueSizeLimit' : 200,  //同時上傳檔案的個數    
            'fileTypeDesc'   : 'Excel 檔案',    //可選擇檔案型別說明  
            'fileTypeExts'   : '*.MDB*;*.xls;*.xlsx', //控制可上傳檔案的副檔名 
            'multi'          : true,  //允許多檔案上傳   
            //'progressData'   : 'percentage',//設定檔案上傳時顯示資料，有‘percentage’ or ‘speed’兩個引數(百分比和速度) 
            'buttonText'     : '選擇檔案',//按鈕上的文字    
            'fileSizeLimit' : '50MB', //設定單個檔案大小限制     
            'fileObjName' : 'uploadify',  //<input type="file"/>的name    
            'method' : 'post',    
            'removeCompleted' : true,//上傳完成後自動刪除佇列    
            'onFallback':function(){      
                alert("您未安裝FLASH控制元件，無法上傳圖片！請安裝FLASH控制元件後再試。");      
            },
             onQueueComplete:function(queueData){
                    console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)
                },  
            'onUploadStart':function(file){ 
             //	var params = {};
             //	$('#uploadify').uploadify('settings','formData',params);
               
            },
            'onUploadSuccess' : function(file, data, response){//單個檔案上傳成功觸發    
             },
             'onQueueComplete' : function(){//所有檔案上傳完成    
            	 alert("上傳成功！");
             }    
            }); 
        //top.$("#upload").css({"z-index":"99999"});
    });  
    </script>  

  </head>
  
  <body>
   	  <div>
   	  		<span>資料來源：</span>
   	  		<input type="radio" name="bm" value="MDB" checked />MDB
   	  		<input type="radio" name="bm" value="Excel" checked />Excel
   	  </div>
   	  <table style="width: 90%;">  
            <tr>  
                <td style="width: 100px;">  
                	<form enctype="multipart/form-data">
                    <input type="file" name="uploadify" id="uploadify"/>  
                    </form>
                </td>  
                <td align="left">  
                <div id="query" onclick="javascript:$('#uploadify').uploadify('upload','*')" style="font: normal 12px 微軟雅黑;position: absolute;top: 12px; width: 82px; right: 20px;height: 25px; line-height: 25px; border: 1px solid #0078E0; text-align: center; color: #0078E0; cursor: pointer;">
				開始上傳
			    </div> 
			    <div id="query" onclick="javascript:$('#uploadify').uploadify('cancel','*')" style="font: normal 12px 微軟雅黑;position: absolute;top: 12px; width: 82px; right: 120px; height: 25px; line-height: 25px; border: 1px solid #0078E0; text-align: center; color: #0078E0; cursor: pointer;">
				取消上傳
			    </div>
                <span id="result" style="font-size: 12px;color: #3379E2"></span>  
                </td>  
            </tr>  
        </table>  
            <div id="fileQueue" style="overflow-y: auto; position: absolute; bottom: 0px; left: 0px; right: 0px; top: 70px;"></div>  
  </body>
</html>

2、詳細介紹：

（1）options：

$('#file_upload').uploadify({
                auto:false, 
                //接受true or false兩個值，當為true時選擇檔案後會自動上傳；為false時只會把選擇的檔案增加進佇列但不會上傳，這時只能使用upload的方法觸發上傳。不設定auto時預設為true
                buttonClass: "some-class", 
                //設定上傳按鈕的class
                buttonCursor: 'hand',
                //設定滑鼠移到按鈕上的開狀，接受兩個值'hand'和'arrow'(手形和箭頭)
                buttonImage: 'img/browse-btn.png', 
                //設定圖片按鈕的路徑（當你的按鈕是一張圖片時）。如果使用預設的樣式，你還可以建立一個滑鼠懸停狀態，但要把兩種狀態的圖片放在一起，並且預設的放上面，懸停狀態的放在下面（原文好難表達啊：you can create a hover state for the button by stacking the off state above the hover state in the image）。這只是一個比較便利的選項，最好的方法還是把圖片寫在CSS裡面。
                buttonText: '<div>選擇檔案</div>',
                //設定按鈕文字。值會被當作html渲染，所以也可以包含html標籤
                checkExisting: '/uploadify/check-exists.php',
                //接受一個檔案路徑。此檔案檢查正要上傳的檔名是否已經存在目標目錄中。存在時返回1，不存在時返回0(應該主要是作為後臺的判斷吧)，預設為false
                debug: false,
                //開啟或關閉debug模式
                fileObjName:'filedata',
                //設定在後臺指令碼使用的檔名。舉個例子，在php中，如果這個選項設定為'the_files',你可以使用$_FILES['the_files']存取這個已經上傳的檔案。
                fileSizeLimit:'100MB',
                //設定上傳檔案的容量最大值。這個值可以是一個數字或者字串。如果是字串，接受一個單位（B,KB,MB,GB）。如果是數字則預設單位為KB。設定為0時表示不限制
                fileTypeExts: '*.*',
                //設定允許上傳的副檔名（也就是檔案型別）。但手動鍵入檔名可以繞過這種級別的安全檢查，所以你應該始終在服務端中檢查檔案型別。輸入多個副檔名時用分號隔開('*.jpg;*.png;*.gif')
                fileTypeDesc: 'All Files',
                //可選檔案的描述。這個值出現在檔案瀏覽視窗中的檔案型別下拉選項中。（chrome下不支援，會顯示為'自定義檔案',ie and firefox下可顯示描述）
                formData: {
                    timestamp: '<?php echo $timestamp;?>',
                    token: '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                //通過get或post上傳檔案時，此物件提供額外的資料。如果想動態設定這些值，必須在onUploadStartg事件中使用settings的方法設定。在後臺指令碼中使用 $_GET or $_POST arrays (PHP)存取這些值。看官網參考寫法：http://www.uploadify.com/documentation/uploadify/formdata/
                height: 30,
                //設定按鈕的高度(單位px)，預設為30.(不要在值裡寫上單位，並且要求一個整數，width也一樣)
                width: 120,
                //設定按鈕寬度(單位px)，預設120
                itemTemplate:false,
                //模板物件。給增加到上傳佇列中的每一項指定特殊的html模板。模板格式請看官網http://www.uploadify.com/documentation/uploadify/itemtemplate/
                method:'post',
                //提交上傳檔案的方法，接受post或get兩個值，預設為post
                multi: false,
                //設定是否允許一次選擇多個檔案，true為允許，false不允許
                overrideEvents: [],
                //重寫事件，接受事件名稱的陣列作為引數。所設定的事件將可以被使用者重寫覆蓋
                preventCaching:true,
                //是否快取swf檔案。預設為true，會給swf的url地址設定一個隨機數，這樣它就不會被快取。(有些瀏覽器快取了swf檔案就會觸發不了裡面的事件--by rainweb)
                progressData: 'percentage',
                //設定檔案上傳時顯示資料，有‘percentage’ or ‘speed’兩個引數(百分比和速度)
                queueID: false,
                //設定上傳佇列DOM元素的ID，上傳的專案會增加進這個ID的DOM中。設定為false時則會自動生成佇列DOM和ID。預設為false
                queueSizeLimit: 999,
                //設定每一次上傳佇列中的檔案數量。注意並不是限制總的上傳檔案數量（那是uploadLimit）.如果增加進佇列中的檔案數量超出這個值，將會觸發onSelectError事件。預設值為999
                removeCompleted: true,
                //是否移除掉佇列中已經完成上傳的檔案。false為不移除
                removeTimeout: 3,
                //設定上傳完成後刪除掉檔案的延遲時間，預設為3秒。如果removeCompleted為false的話，就沒意義了
                requeueErrors: false,
                //設定上傳過程中因為出錯導致上傳失敗的檔案是否重新加入佇列中上傳
                successTimeout: 30,
                //設定檔案上傳後等待伺服器響應的秒數，超出這個時間，將會被認為上傳成功，預設為30秒
                swf: 'uploadify.swf',
                //swf的相對路徑，必寫項
                uploader: 'uploadify.php'
                //伺服器端指令碼檔案路徑，必寫項
                uploadLimit: 999
                //上傳檔案的數量。達到或超出這數量會觸發onUploadError方法。預設999
            })

（2）事件 event：

$('#file_upload').uploadify({    
                onCancel: function(file){
                        console.log('The file'+ file.name + 'was cancelled.')
                },
                //檔案被移除出佇列時觸發,返回file引數
                onClearQueue: function(queueItemCount){
                    console.log(queueItemCount+'file(s) were removed frome the queue')
                },
                //當呼叫cancel方法且傳入'*'這個引數的時候觸發，其實就是移除掉整個佇列裡的檔案時觸發，上面有說cancel方法帶*時取消整個上傳佇列
                onDestroy: function(){
                    //呼叫destroy方法的時候觸發
                },
                onDialogClose: function(queueData){
                    console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored)
                },
                //關閉掉瀏覽檔案對話方塊時觸發。返回queueDate引數，有以下屬性：
                /*
                    filesSelected 瀏覽檔案對話方塊中選取的檔案數量
                    filesQueued 加入上傳佇列的檔案數
                    filesReplaced 被替換的檔案個數
                    filesCancelled 取消掉即將加入佇列中的檔案個數
                    filesErrored 返回錯誤的檔案個數
                */
                onDialogOpen:function(){
                    //開啟選擇檔案對話方塊時觸發
                },
                onDisable:function(){
                    //禁用uploadify時觸發(通過disable方法)
                },
                onEnalbe: function(){
                    //啟用uploadify時觸發(通過disable方法)
                },
                onFallback:function(){
                    //在初始化時檢測不到瀏覽器有相容性的flash版本時實觸發
                },
                onInit: function(instance){
                    console.log('The queue ID is'+ instance.settings.queueID)
                },
                //每次初始化一個佇列時觸發，返回uploadify物件的例項
                onQueueComplete:function(queueData){
                    console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)
                },
                //佇列中的檔案都上傳完後觸發，返回queueDate引數，有以下屬性：
                /*
                    uploadsSuccessful 成功上傳的檔案數量
                    uploadsErrored 出現錯誤的檔案數量
                */
                onSelect: function(file){
                    console.log(file.name)
                },
                //選擇每個檔案增加進佇列時觸發，返回file引數
                onSelectError: function(file,errorCode,errorMsg){
                    console.log(errorCode)
                    console.log(this.queueData.errorMsg)
                },
                //選擇檔案出錯時觸發，返回file,erroCode,errorMsg三個引數
                /*
                    errorCode是一個包含了錯誤碼的js物件，用來檢視事件中傳送的錯誤碼，以確定錯誤的具體型別，可能會有以下的常量：
                    QUEUE_LIMIT_EXCEEDED:-100 選擇的檔案數量超過設定的最大值；
                    FILE_EXCEEDS_SIZE_LIMIT:-110 檔案的大小超出設定
                    INVALID_FILETYPE:-130 選擇的檔案型別跟設定的不匹配

                    errorMsg 完整的錯誤資訊，如果你不重寫預設的事件處理器，可以使用‘this.queueData.errorMsg’ 存取完整的錯誤資訊
                */
                onSWFReady: function(){
                    //swf動畫載入完後觸發，沒有引數
                },
                onUploadComplete: function(file){
                    //在每一個檔案上傳成功或失敗之後觸發，返回上傳的檔案物件或返回一個錯誤，如果你想知道上傳是否成功，最後使用onUploadSuccess或onUploadError事件
                },
                onUploadError: function(file,errorCode,erorMsg,errorString){
                },
                //一個檔案完成上傳但返回錯誤時觸發，有以下引數
                /*
                    file 完成上傳的檔案物件
                    errorCode 返回的錯誤程式碼
                    erorMsg 返回的錯誤資訊
                    errorString 包含所有錯誤細節的可讀資訊
                */
                onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){
                    $('#pregress').html('總共需要上傳'+bytesTotal+'位元組，'+'已上傳'+totalBytesTotal+'位元組')
                },
                //每更新一個檔案上傳進度的時候觸發,返回以下引數
                /*
                    file 正上傳檔案物件
                    bytesUploaded 檔案已經上傳的位元組數
                    bytesTotal 檔案的總位元組數
                    totalBytesUploaded 在當前上傳的操作中（所有檔案）已上傳的總位元組數
                    totalBytesTotal 所有檔案的總上傳位元組數
                */
                onUploadStart: function(file){
                    console.log('start update')
                },
                //每個檔案即將上傳前觸發
                onUploadSuccess: function(file,data,respone){
                    alert( 'id: ' + file.id
　                          + ' - 索引: ' + file.index
　　　　　　　　　　　　　　　　+ ' - 檔名: ' + file.name
　　　　　　　　　　　　　　　　+ ' - 檔案大小: ' + file.size
　　　　　　　　　　　　　　　　+ ' - 型別: ' + file.type
　　　　　　　　　　　　　　　　+ ' - 建立日期: ' + file.creationdate
　　　　　　　　　　　　　　　　+ ' - 修改日期: ' + file.modificationdate
　　　　　　　　　　　　　　　　+ ' - 檔案狀態: ' + file.filestatus
　　　　　　　　　　　　　　　　+ ' - 伺服器端訊息: ' + data
　　　　　　　　　　　　　　　　+ ' - 是否上傳成功: ' + response);
                }
                //每個檔案上傳成功後觸發              
})

（3）

Methods：
Uploadify使用jquery推薦的外掛模式，這意味著所有方法的呼叫都保持在一個名稱空間裡。呼叫這些不同的方法，只需要把方法當成第一個引數傳進uploadify裡呼叫就行。在這些方法後面增加引數會被傳進這個方法裡（這兩句翻譯得不是很順暢，附原文： To use the different method calls, simply call Uploadify on the DOM element with the method call as the first argument.Any additional arguments added after the method name are passed to the method.）

cancel：取消第一個上傳的檔案，如果後面帶引數"*"則是取消掉整個上傳佇列，如$(el).uploadify('cancel', '*')

upload：上傳第一個上傳的檔案，如果後面帶引數"*"則上傳整個佇列，跟cancel一樣

destroy：移除掉上傳組建，按html預設的方法上傳

disable：有true or false 兩個引數，表示是否禁止上傳按鈕，true表示禁止，false表示允許上傳

settings：返回或者更新一個例項的方法值，接受一個方法名的引數時是返回那個方法的值，當後面再跟一個引數，則是更新那個方法的值。如

$(el).uploadify('settings','buttonText','BROWSE'); //設定buttonText的值為BROWSE
$(el).uploadify('settings','buttonText') //返回buttonText的值

stop：停止正在上傳中的檔案或佇列

java 上傳檔案到伺服器之jquery.uploadify

java 上傳檔案到伺服器之jquery.uploadify

java上傳檔案到 linux 下的 tomcat 檔案伺服器

CentOS6.5下搭建FTP伺服器 + Java上傳檔案

Java 上傳檔案至FTP伺服器

java httpclient 上傳檔案伺服器 servlet 接收

FastDFS通過java上傳檔案到伺服器

Java-上傳檔案Spring MultipartResolver 或者 ServletFileUpload

java 上傳檔案、圖片壓縮

java上傳檔案到區域網內的另一臺計算機上

jquery的非同步提交表單（非同步上傳檔案）及jquery.form.js上傳檔案注意事項

java 上傳檔案到七牛雲端儲存的demo

第10步 (1)logback.xml日誌配置(2) ftp(上傳檔案)伺服器配置(3) idea注入和自動編譯配置(4)專案提交gitee(5)fe助手和restlet client

java上傳檔案，壓縮，解壓儲存

上傳檔案伺服器搭建

java上傳檔案到linux上防止檔名中文亂碼

JAVA上傳檔案至HDFS程式碼及對應jar包

java上傳檔案時tomcat崩潰

java上傳檔案到hdfs簡單demo

java上傳檔案以流方式判斷型別

java上傳檔案通過SFTP

java 上傳檔案到伺服器之jquery.uploadify

相關推薦