jQuery FileUpload 插件

sugarmo 發布于2019-08-20 17:48 / 1745人閱讀

摘要：插件在前端開發過程中，我們經常要上傳文件，這是我們就要用這是原生的寫法，看起來不是很美觀。導入事件是一個文件上傳組件，支持多文件上傳取消刪除，上傳前縮略圖預覽列表顯示圖片大小，支持上傳進度條顯示支持各種動態語言開發的服務器端。

jQuery FileUpload 插件

在前端開發過程中，我們經常要上傳文件，這是我們就要用這是原生的寫法，看起來不是很美觀。下面我們聊一種比較優雅的實現方法。

上傳文件

首先，我們隱藏的input框，并將input框的click事件綁定到它上面的button元素上（通過onclick="$(this).next().click()"實現），這樣我們就可以按照我們自己的喜好來設置button的樣式，同時也達到了上傳文件的功能。

fileupload 事件

jQuery File Upload 是一個Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支持各種動態語言開發的服務器端。
我們這里主要說說文件上傳和文件格式、大小的要求

引入相關插件

fileupload插件是必須的，fileupload-process負責處理上傳過程中各個事件的管理，fileupload-validate則是對驗證的支持

使用插件

我們可以對上傳文件的大小和文件類型進行驗證，并通過messages設置驗證失敗時的提示信息。

 $("input[name="file"]").fileupload({

       url: "上傳地址",
       Type: "POST",
       autoUpload: true,
       acceptFileTypes:/.(doc|docx)$/i,// 文件格式
       maxFileSize: 99 * 1024 * 1024, //文件大小
       
       // 設置驗證失敗的提示信息
       messages: {
       maxFileSize: "File exceeds maximum allowed size of 99MB",
       acceptFileTypes: "File type not allowed"
       },
       
       processfail: function (e, data) {
           var currentFile = data.files[data.index];
           if (data.files.error && currentFile.error) {
               // there was an error, do something about it
               console.log(currentFile.error);
           }
       },
       
       done: function() {
          // 上傳成功的回調函數，可以彈出“上傳成功”之類的彈框
       },
       fail: function() {
          // 上傳失敗的回調函數，可以彈出“上傳失敗”之類的彈框
       },

     })

Jquery 有很多很好用的插件，逐個去學習不是很現實，只有在用到的時候，盡力去搞懂其使用方法。慢慢積累吧~~~

GPU云服務器云服務器 jquery fileupload jquery插件源碼jquery jquery插件手寫jQuery插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83881.html

node 實現圖片的裁切與上傳

摘要：使用了以后，圖片上傳可以由服務器來完成，保存后的圖片地址再傳給后臺進行保存。圖片的上傳使用的插件表單上傳生成通用識別碼代碼該游覽器暫不支持文件上傳代碼上傳失敗文件不要超過上傳成功圖片的裁切使用的插件圖片處理圖像裁剪插件使用了node以后，圖片上傳可以由node服務器來完成，保存后的圖片地址再傳給后臺進行保存。簡單的文件操作切割，壓縮什么的也可以交給node服務器完成。圖片的上傳使...

BigNerdCoding 2019-08-19 17:42 評論0 收藏0
WebUploader上傳插件使用說明

摘要：否則強制轉換成指定的類型。是否要分片處理大文件上傳還有其他配置項上傳事件選擇需要上傳的文件后，文件就會加入文件隊列，并觸發事件上傳進度回調事件，在文件上傳中，多次調用此事件當文件上傳成功時觸發當文件上傳出錯時觸發。 WebUploader簡述具有兩套運行時支持：HTML5與FLASH 分片、并發預覽、壓縮多途徑添加文件 MD5驗證引入文件雖然官方沒說必須要引入JQuery...

xbynet 2019-08-29 12:27 評論0 收藏0
WebUploader上傳插件使用說明

摘要：否則強制轉換成指定的類型。是否要分片處理大文件上傳還有其他配置項上傳事件選擇需要上傳的文件后，文件就會加入文件隊列，并觸發事件上傳進度回調事件，在文件上傳中，多次調用此事件當文件上傳成功時觸發當文件上傳出錯時觸發。 WebUploader簡述具有兩套運行時支持：HTML5與FLASH 分片、并發預覽、壓縮多途徑添加文件 MD5驗證引入文件雖然官方沒說必須要引入JQuery...

羅志環 2019-08-20 15:59 評論0 收藏0
WebUploader上傳插件使用說明

摘要：否則強制轉換成指定的類型。是否要分片處理大文件上傳還有其他配置項上傳事件選擇需要上傳的文件后，文件就會加入文件隊列，并觸發事件上傳進度回調事件，在文件上傳中，多次調用此事件當文件上傳成功時觸發當文件上傳出錯時觸發。 WebUploader簡述具有兩套運行時支持：HTML5與FLASH 分片、并發預覽、壓縮多途徑添加文件 MD5驗證引入文件雖然官方沒說必須要引入JQuery...

20171112 2019-08-01 16:41 評論0 收藏0
IE9下的跨域問題小總結

摘要：由于瀏覽器同源策略，凡是發送請求的協議域名端口三者之間任意一與當前頁面地址不同即為跨域最近項目要兼容，找了一些資料，實踐了一下，現在總結一下，避免以后踩坑。解決方案，微軟在和下給我們提供了來進行解決跨域問題，官方的文檔可以在這里看到。由于瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域最近項目要兼容IE9，找了一些資料，實踐了一下，現在總...

Jokcy 2019-08-21 11:38 評論0 收藏0