幾款不錯的 JavaScript 文件上傳插件

0
1094

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

jQuery File Uploader

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

支援預覽圖片、音訊和影片,支援跨域上傳和客戶端圖片縮放,支援的服務端平台有:PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。

使用示例:

$(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');
});
下載

DropZoneJS

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

使用方法非常簡單,只需添加 class 即可:

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

或者手動實例化:

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

可以添加更多參數:

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
    });
});
下載

FineUploader

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

主要特色:

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

使用示例:

(1)手動觸發上傳

<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)編輯文件名稱

<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)自定義選項

<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)顯示圖片縮圖

<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)限制文件上傳數

<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>
下載