jquery upload 插件開發說明

時間 2019-11-18

原文原文鏈接

前言

　　　　本實例爲初步版本的文檔說明，供學習與下載。請多多提出指導意見。css

　　　　項目目前僅支持html5/css3，暫時只處理了上傳圖片、音頻類文件、其餘文件等。項目同時支持跨域上傳。html

頁面調用說明

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title>這是一個簡單的上傳</title>
 5     <!-- 必須引入的js、css文件 -->
 6     <link href="../css/upload.css" rel="stylesheet" />
 7     <script src="../script/jquery-1.10.2.js"></script>
 8     <script src="../script/util.js"></script>
 9     <script src="../jquery-upload.js"></script>
10 </head>
11 <body>
12     <p style="clear: both; color: rgb(194, 61, 55); font-size: 16px">多文件,上傳圖片類文件</p>
13     <!-- 上傳組件容器 -->
14     <div id="uploadContainer" 
15          data-url="../handle/UploadHandler.ashx" 
16          data-accept="image/jpeg,image/png" 
17          data-size="2048" 
18          data-multiple="multiple" 
19          data-callback-func="testCallbackFunc" 
20          data-callback-element="testCallback" 
21          data-path="../../files/{0}">
22     </div>
23 
24     <div style="clear: both;padding-top:  20px">
25         <!-- 回寫的input元素 -->
26         <input style="width: 250px" type="text" value="" name="testCallback" />
27     </div>
28     <script>
29         //上傳成功後回調方法
30         window.testCallbackFunc = function (status) {
31             alert("回調狀態:" + status);
32         }
33     </script>
34 </body>
35 </html>

組件容器參數說明

<div id="uploadContainer" ------------------------------容器id,一個頁面多個組件時id應當惟一
         data-url="../handle/UploadHandler.ashx" -------上傳處理程序
         data-accept="image/jpeg,image/png" ------------文件格式限定，注意用逗號隔開，若是爲notlimit則能夠上傳任意類型文件
         data-size="2048" ------------------------------文件最大尺寸
         data-multiple="multiple" ----------------------是否容許多選文件
         data-callback-func="testCallbackFunc" ---------上傳完成回調函數
         data-callback-element="testCallback" ----------上傳完成回寫元素
         data-path="../../files/{0}">-------------------圖片顯示路徑
</div>