【精心推薦】幾款極好的 JavaScript 文件上傳插件

時間 2019-12-13

標籤精心推薦極好 javascript 文件上傳插件欄目 JavaScript 简体版

原文原文鏈接

　　文件上傳功能做爲網頁重要的組成部分，幾乎無處不在，從簡單的單個文件上傳到複雜的批量上傳、拖放上傳，須要開發者花費大量的時間和精力去處理，以期實現好用的上傳功能。這篇文章向你們推薦幾款很棒的 JavaScript 文件上傳功能加強插件。javascript

您可能感興趣的相關文章

jQuery File Uploaderphp

這是最受歡迎的 jQuery 文件上傳組件，支持批量上傳，拖放上傳，顯示上傳進度條以及校驗功能。css

支持預覽圖片、音頻和視頻，支持跨域上傳和客戶端圖片縮放，支持的服務端平臺有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。html

使用示例：java

 
         $( 
         function  
         () { 
        
         'use strict' 
         ; 
        
         // Change this to the location of your server-side upload handler: 
        
         var  
         url = window.location.hostname ===  
         'blueimp.github.io'  
         ? 
        
         '//jquery-file-upload.appspot.com/'  
         :  
         'server/php/' 
         ; 
        
         $( 
         '#fileupload' 
         ).fileupload({ 
        
         url: url, 
        
         dataType:  
         'json' 
         , 
        
         done:  
         function  
         (e, data) { 
        
         $.each(data.result.files,  
         function  
         (index, file) { 
        
         $( 
         '<p/>' 
         ).text(file.name).appendTo( 
         '#files' 
         ); 
        
         }); 
        
         }, 
        
         progressall:  
         function  
         (e, data) { 
        
         var  
         progress = parseInt(data.loaded / data.total * 100, 10); 
        
         $( 
         '#progress .progress-bar' 
         ).css( 
        
         'width' 
         , 
        
         progress +  
         '%' 
        
         ); 
        
         } 
        
         }).prop( 
         'disabled' 
         , !$.support.fileInput) 
        
         .parent().addClass($.support.fileInput ? undefined :  
         'disabled' 
         ); 
        
         });

插件下載在線演示 jquery

DropZoneJSgit

DropzoneJS 是一個用於現代瀏覽器的開源的拖放上傳插件，最大的特點是即時圖片預覽功能。github

使用方法很是簡單，只需添加 class 便可：ajax

1	`<` `form` `id` `=` `"my-awesome-dropzone"` `action` `=` `"/target"` `class` `=` `"dropzone"` `></` `form` `>`

或者手動實例化：json

1	`new` `Dropzone(` `"div#my-dropzone"` `, {` `/* options */` `});`

能夠添加更多參數：

1	`Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };`

發能夠自定義事件：

 
         Dropzone.options.myDropzone({ 
        
         init:  
         function 
         () { 
        
         this 
         .on( 
         "error" 
         ,  
         function 
         (file, message) { alert(message); }); 
        
         } 
        
         }); 
        
         // or if you need to access a Dropzone somewhere else: 
        
         var  
         myDropzone = Dropzone.forElement( 
         "div#my-dropzone" 
         ); 
        
         myDropzone.on( 
         "error" 
         ,  
         function 
         (file, message) { alert(message); });<span style= 
         "line-height: 1.5;" 
         >　</span>

插件下載在線演示

Uploadify

Uploadify 有兩個版本，HTML5 方法上傳版本和傳統的 Flash 上傳。支持高度自定義，能夠完美的繼承到你的網站中。

Flash 版本兼容性好，使用示例：

 
         $( 
         function 
         () { 
        
         $( 
         "#file_upload_1" 
         ).uploadify({ 
        
         height        : 30, 
        
         swf           :  
         '/uploadify/uploadify.swf' 
         , 
        
         uploader      :  
         '/uploadify/uploadify.php' 
         , 
        
         width         : 120 
        
         }); 
        
         });