【精心推薦】幾款極好的 JavaScript 檔案上傳外掛

阿新 • • 發佈：2019-01-12

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

您可能感興趣的相關文章

這是最受歡迎的 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 是一個用於現代瀏覽器的開源的拖放上傳外掛，最大的特色是即時圖片預覽功能。

使用方法非常簡單，只需新增 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 有兩個版本，HTML5 方法上傳版本和傳統的 Flash 上傳。支援高度自定義，可以完美的繼承到你的網站中。

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

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

外掛下載線上演示

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

外掛下載線上演示

您可能感興趣的相關文章

【精心推薦】幾款極好的 JavaScript 檔案上傳外掛

　　檔案上傳功能作為網頁重要的組成部分，幾乎無處不在，從簡單的單個檔案上傳到複雜的批量上傳、拖放上傳，需要開發者花費大量的時間和精力去處理，以期實現好用的上傳功能。這篇文章向大家推薦幾款很棒的 JavaScript 檔案上傳功能增強外掛。您可能感興趣的相關文章這是最受歡迎的 jQuer

【程式碼審計】CLTPHP_v5.5.3 前臺任意檔案上傳漏洞分析

0x00 環境準備 CLTPHP官網：http://www.cltphp.com 網站原始碼版本：CLTPHP內容管理系統5.5.3版本程式原始碼下載：https://gitee.com/chichu/cltphp 預設後臺地址： http://127.0.0.1/admin/log

Java之美[從菜鳥到高手演變]之集合類【吐血推薦！講得太好了！！！】

source: http://blog.csdn.net/zhangerqing/article/details/8122075 最近在找工作，目前還沒有定下來，拿到了一個公司的offer，不過被當白菜了，正在商量薪資方面的事情。隨著百度面試的失敗，夢想再次破滅

Android探索之旅（第十篇）推薦幾款非常好用的Bug除錯工具

首推騰訊Bugly - 一種愉悅的開發方式是一款非常方便幫組開發者實時的檢測App的異常及應用統計，還有更加強大的應用更新及熱修復，讓你的App 6飛起官網地址：https://bugly.qq

【推薦】四款資料庫視覺化操作工具

後端開發，離不開資料庫，管理資料庫肯定會用到視覺化介面，相信大家使用到的視覺化工具也有很多，我這裡推薦自己經常使用到的四款資料庫視覺化操作工具，主要是用於MySQL視覺化，但不侷限於MySQL。按照圖片中的推薦順序來一一講解，該順序主要是按照自己的使用習

【eclipse Plug-in】幾款Eclipse不錯的外掛

來自非營利性Eclipse基金會的Eclipse IDE以其外掛生態系統著稱。Eclipse市場擁有海量外掛可供下載，你可以通過外掛定製自己的Eclipse。最近我在Eclipse市場閒逛，想看看能不能發現一些有意思的東西。實際上，我確實找到了一些在我看來雖然不是很有名卻很酷的東西，想在這裡和大家分享。

【BZOJ 2653】middle 主席樹好題推薦

談談這一道題的最強烈的感受在於，我的主席樹入門是經典題目區間第k大樹查詢（當然，因為poj上不會強制線上，還用樹套樹和整體二分寫過那道題），因此，對於主席樹的理解僅僅是一個區間歷史版本維護的理解，即類似於樹套樹的外層區間樹內層全值樹。但是忽略了主席樹的真正偉大之處在於可持久

細線表格的幾種做法（css）【經典推薦】

(一)效果一般<style type="text/css"><!--table {border-collapse:collapse;}td{border-left:0;border-top:0;border-right:1px solid #00cd11;b

【健康生活】程序猿保護好自己的頸椎

修復上網生活習慣 ast 放松工作頸椎病基本左右我們程序猿天天對著電腦，眼睛，頸椎等等。都會落下不少的職業病。來說說怎麽治療自己的頸椎病。一、頸椎病是怎麽產生的形成頸椎病的核心原因是：不良生活習慣我們身體的絕大部分疾病都是來自不良的生活習慣

【新書推薦】“十三五”國家重點出版規劃項目《網絡安全技術及應用》第3版出版發行

“十三五”國家重點出版規劃項目《網絡安全技術及應用》第3版出版發行【新書推薦】“十三五”國家重點出版規劃項目《網絡安全技術及應用》第3版出版發行新書特色：“十三五”國家重點出版規劃項目暨上海市高校精品課程特色教材（立體化.新型態.雙色印刷-掃描二維碼可看視頻等），上海市高校優秀教材獎，核心

【書籍推薦】

自己人員 issue 合數異常技術 target tle 提高 Java 1. 《Java核心技術卷1 基礎知識》 2. 《Java核心技術卷II 高級特性》 Java 領域最有影響力和價值的著作之一。其中《卷1》主講基礎知識，全面講解 Java 語言的

【帶寬】如何選擇更好的網絡資源

雲計算、帶寬、性價比雲計算發展至今，已成為互聯網基礎資源和設施；用戶和企業上雲成為趨勢，其價值和意義毋庸置疑，最關鍵的莫過於以下幾點：1.降低資源和運營的成本；2.快速部署，提升效率；3.高可用高可靠的技術保障；今天，小普從網絡資源的角度，伴您走近睿江雲的網絡資源。首先，在上雲的資源成本上，提供一份數據調研（

【強烈推薦】科註學習班——自了法師分享：珍惜暇滿人身寶（上）

針對得來 pro 後來全國有一點 HR ner 想去凈土宗專修平臺 2016-03-11 新佛友請點擊圖片上方【凈土宗專修平臺】輕松關註。回復【阿彌陀佛】既有大量珍貴資源（在百度網盤裏）與您分享！摘自《科註學習班第206集》 2016/3/2

【限時福利】系統運維好課集錦，不知如何選課？先來這裏看看~

acl 管理經驗 man zabbix 提升自動化運維工具精品 mil new 系統運維好課推薦來啦，7.19-7.22本文中推薦的視頻課程和專題全部限時折扣哦~對系統運維感興趣，或希望在此領域得到提升的同學，不要錯過這波哦~（註：視頻課程或專題均可免費試看，課程中有多

【工具推薦】提高圖片質量的方法

0. 說明　　有時候我們從網上下載一些技術文章的配圖時，在遇到一些模糊的流程圖或架構圖的時候真的很無解，有些圖片被多次下載然後又上傳，加上上傳本身對圖片質量的壓縮，所以在想找一個能提高圖片質量的工具，這裡的圖片是指一些自繪的流程圖之類的圖。　　在網上找到了一個挺好的網頁，可以將圖片

【工具推薦】記一次水印製作流程

0. 說明　　每次畫完架構圖和流程圖，總覺得少了一些什麼　　不想要單純的文字水印，也沒找到合適的工具　　真的好想擁有一款自己的水印　　為每一張圖新增自己的專屬記號　　然後就有了以下的嘗試 1. 確定水印　　在知乎上看到一個回答，解決了我的這個問題　　傳送門

【深度學習】Tensorboard 視覺化好幫手2

轉自https://morvanzhou.github.io/tutorials/machine-learning/tensorflow/4-2-tensorboard2/ 目錄要點製作輸入源在 layer 中為 Weights, biases 設定變化

【深度學習】Tensorboard 視覺化好幫手1

轉自https://morvanzhou.github.io/tutorials/machine-learning/tensorflow/4-1-tensorboard1/ 注意: 本節內容會用到瀏覽器, 而且與 tensorboard 相容的瀏覽器是 “Google Chrome”.

【技術分享】幾維安全CTO劉柏江：IoT時代LLVM編譯器防護的藝術

「隨著物聯網時代的開啟，需要解決的安全問題會愈來愈多，而程式碼安全是其他安全方案的底層支撐。面對晶片架構繁多，執行環境複雜的嵌入式物聯網裝置，傳統的程式碼安全方案都將會失效，LLVM編譯器為我們帶來了終極程式碼安全解決方案。」日前，幾維安全CTO劉柏江在2018 ISC網際網路安全大會“網路安

【精心推薦】幾款極好的 JavaScript 檔案上傳外掛

相關推薦