幾款極好的 JavaScript 文件上傳插件

時間  2019-11-11
標籤 極好 javascript 文件 上傳 插件 欄目 JavaScript 简体版
原文   原文鏈接

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

　　jQuery File Uploaderphp

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

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

　　使用示例：java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$( 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 便可：web

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 };

　　發能夠自定義事件：

1
2
3
4
5
6
7
8
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 版本兼容性好，使用示例：

1
2
3
4
5
6
7
8
$( function () {
     $( "#file_upload_1" ).uploadify({
         height        : 30,
         swf           : '/uploadify/uploadify.swf' ,
         uploader      : '/uploadify/uploadify.php' ,
         width         : 120
     });
});

　　插件下載      在線演示

　　FineUploader

　　這個 JavaScript 插件能夠幫助你在網站中集成體驗極好的文件上傳功能。能夠結合 jQuery 或者 Bootstrap 使用。

　　主要特點：

  • 批量上傳
  • 顯示進度條
  • 拖放上傳
  • 自動或者手動上傳，可取消
  • 自定義錯誤提示信息
  • 自動或者手動重試
  • 內置的校驗規則
  • 可編輯文件名稱

　　使用示例：

　　（1）手動觸發上傳

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
< div id = "manual-fine-uploader" ></ div >
< div id = "triggerUpload" class = "btn btn-primary" style = "margin-top: 10px;" >
   < i class = "icon-upload icon-white" ></ i > Upload now
</ div >
 
< script src = "http://code.jquery.com/jquery-latest.js" ></ script >
< script src = "jquery.fineuploader-{VERSION}.js" ></ script >
< script >
   $(document).ready(function() {
     var manualuploader = $('#manual-fine-uploader').fineUploader({
       request: {
         endpoint: 'server/handleUploads'
       },
       autoUpload: false,
       text: {
         uploadButton: '< i class = "icon-plus icon-white" ></ i > Select Files'
       }
     });
 
     $('#triggerUpload').click(function() {
       manualuploader.fineUploader('uploadStoredFiles');
     });
   });
</ script >

　　（2）編輯文件名稱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
< html >
   < head >
     < meta charset = "utf-8" >
     < title >Fine Uploader - jQuery Wrapper Minimal Demo</ title >
     < link href = "fineuploader-{VERSION}.css" rel = "stylesheet" >
   </ head >
   < body >
     < div id = "jquery-wrapped-fine-uploader" ></ div >
 
     < div id = "triggerUpload" class = "btn btn-primary" style = "margin-top: 10px;" >
         < i class = "icon-upload icon-white" ></ i > Upload now
     </ div >
 
     < script src = "http://code.jquery.com/jquery-latest.js" ></ script >
     < script src = "jquery.fineuploader-{VERSION}.js" ></ script >
     < script >
       $(document).ready(function () {
         $('#myFineUploader').fineUploader({
             request: {
                 endpoint: 'server/handleUploads'
             },
             editFilename: {
                 enabled: true
             },
             autoUpload: false
         });
 
         $('#triggerUpload').click(function() {
             $('#myFineuploader').fineUploader('uploadStoredFiles');
         });
     </ script >
   </ body >
</ html >

　　（3）自定義選項

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< div id = "restricted-fine-uploader" ></ div >
 
< script src = "http://code.jquery.com/jquery-latest.js" ></ script >
< script src = "jquery.fineuploader-{VERSION}.js" ></ script >
< script >
   $(document).ready(function() {
     $('#restricted-fine-uploader').fineUploader({
       request: {
         endpoint: 'server/success.html'
       },
       multiple: false,
       validation: {
         allowedExtensions: ['jpeg', 'jpg', 'txt'],
         sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
       },
       text: {
         uploadButton: 'Click or Drop'
       },
       showMessage: function(message) {
         // Using Bootstrap's classes
         $('#restricted-fine-uploader').append('< div class = "alert alert-error" >' + message + '</ div >');
       }
     });
   });
</ script >

　　（4）顯示圖片縮略圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
< div id = "thumbnail-fine-uploader" ></ div >
 
< script src = "http://code.jquery.com/jquery-latest.js" ></ script >
< script src = "jquery.fineuploader-{VERSION}.js" ></ script >
< script >
   $(document).ready(function() {
     $('#thumbnail-fine-uploader').fineUploader({
       request: {
         endpoint: 'server/success.html'
       },
       validation: {
         allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
       },
       text: {
         uploadButton: 'Click or Drop'
       }
     }).on('complete', function(event, id, fileName, responseJSON) {
       if (responseJSON.success) {
         $(this).append('< img src = "img/success.jpg" alt = "' + fileName + '" >');
       }
     });
   });
</ script >

　　（5）限制文件上傳數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< div id = "filelimit-fine-uploader" ></ div >
 
< script src = "http://code.jquery.com/jquery-latest.js" ></ script >
< script src = "jquery.fineuploader-{VERSION}.js" ></ script >
< script >
   $(document).ready(function() {
     $('#filelimit-fine-uploader').fineUploader({
       request: {
         endpoint: 'server/success.html'
       },
       validation: {
         itemLimit: 3
       }
     });
   });
</ script >

　　插件下載      在線演示

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程