幾款極好的 JavaScript 檔案上傳外掛

夢想天空發表於2013-09-27
JavaScript

　　檔案上傳功能作為網頁重要的組成部分，幾乎無處不在，從簡單的單個檔案上傳到複雜的批量上傳、拖放上傳，需要開發者花費大量的時間和精力去處理，以期實現好用的上傳功能。這篇文章向大家推薦幾款很棒的 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); });　

　　外掛下載      線上演示

　　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）編輯檔名稱

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

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

　　外掛下載      線上演示

相關文章