以前一直想找一款帶上傳速度的上傳控件,但.net版成熟基本沒有,本周瞎逛看了周公的關於SlickUpload的帖子,於是便非常感興趣!
搜索了一下,最新版6.1.7,文檔不是很全,而且全是英文,本人英文水平一般吧,看了兩天文檔,把slickupload.js從頭看到尾,基本了解了SlickUpload的原理.
然后開工做一個自己的上傳控件吧.目標:實現Jquery無刷新上傳及后台獲取.
還要感謝@Adming 的6.1.7破解方法..我試過反編譯后去掉文字圖片,但是再編譯會報錯!多次嘗試就放棄了!
用了大約一周的時間才搞定!主要是官網給的文檔太坑爹!很多語法根本用不了!必須到slickupload.js找,看完slickupload.js后無難題!
測試:IE7,8,9,10,Chrome,火狐均正常;IE6沒測,不知道能不能用!
先上幾張圖吧,覺得感興趣再往下看!
單文件上傳
多文件上傳
項目文件包含:
css/jquery.slickupload.css
images/幾張小圖片
js/jquery-1.9.1.min.js
js/jquery.slickupload.min.js
js/slickupload.js
Demo.html
html部分(無cs代碼:Demo.html):
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>文件上傳 - 支持拖拽上傳</title> 6 <link href="css/jquery.slickupload.css" rel="stylesheet" /> 7 </head> 8 <body> 9 <form id="form1" method="post" action="Demo.aspx"> 10 <div id="uploaddiv"></div> 11 <div id="onefile"></div> 12 </form> 13 <hr /> 14 <div id="UploadedFiles">上傳成功服務器返回的文件名<br /></div> 15 16 <script type="text/javascript" src="js/slickupload.js"></script> 17 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 18 <script type="text/javascript" src="js/jquery.slickupload.min.js"></script> 19 <script type="text/javascript"> 20 $(function () { 21 $("#uploaddiv").SlickUpload({ UploadFormID: "form1", MaxFiles: 5, MaxFileSize: 1024000, FileExtensions: " ", onFinished: GetServerFileName }); 22 $("#onefile").SlickUpload(); 23 }); 24 function GetServerFileName(FileName) { 25 $("#UploadedFiles").append(FileName + "<br />"); 26 } 27 </script> 28 </body> 29 </html>
不好意思地址失效了!20161221更新百度雲下載地址
下載地址:
鏈接: http://pan.baidu.com/s/1gfoOtSR 密碼: bvdt
內含 企業版SlickUpload,無需配置global了,及集成TinyMce編輯器 單文件 多文件上傳.