當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Web文件上传方法总结大全

發布時間：2024/9/19 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web文件上传方法总结大全小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文件上傳在WEB開發中應用很廣泛，我們經常發微博、發微信朋友圈都用到了圖片上傳功能。

文件上傳是指將本地圖片、視頻、音頻等文件上傳到服務器上，可以供其他用戶瀏覽或下載的過程。

今天我給大家聊聊常見的文件（圖片）上傳的方式和要點處理。

表單上傳

這是傳統的form表單上傳，使用form表單的input[type=”file”]控件，可以打開系統的文件選擇對話框，從而達到選擇文件并上傳的目的，它的好處是多瀏覽器兼容，它是web開發者最常用的一種文件上傳方式。

表單的代碼如下：

以下是表單上傳幾個關鍵點：

method=”post”：采用post方式提交數據
enctype=”multipart/form- data”：采用multipart格式上傳文件，此時request頭會顯示 Content-Type:multipart/form-data; boundary=—-WebKitFormBoundaryzr34cwJ67R95KQC9
action：標明上傳的服務端處理地址
type=”file”：使用input的file控件上傳
如果是多文件批量上傳，可以將input[type=”file”]的name屬性設置為如：name=”file[]”
accept屬性是HTML5的新屬性，它規定了可通過文件上傳提交的文件類型
上傳的觸發事件可以是：input[type=”file”]的onChange觸發，也可以由一個獨立的按鈕的onClick使整個表單提交，此時還可以用input[type=”hidden”]帶一些其它的參數，比如Token來源驗證等等。

Ajax無刷新上傳

Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來采用ajax提交，并且由前端決定請求結果回傳后的展示結果，不用像直接表單上傳那樣刷新和跳轉頁面。在這里，我們采用jQuery來作為操作DOM和創建ajax提交的js基礎庫。

html代碼片段如下：

javascript代碼片段如下：

$("#file").on("change", function(){var formData = new FormData();formData.append("file", $("#file")[0].files);formData.append("token", $("#token").val());$.ajax({url: "http://uploadUrl",type: "POST",data: formData,processData: false,contentType: false,success: function(response){// 根據返回結果指定界面操作}}); });

我們使用了file控件的change來觸發上傳事件，當然你也可以使用某個按鈕來觸發表單提交。提交數據時，我用到了FormData對象來發送二進制文件，FormData構造函數提供的append()方法，除了直接添加二進制文件還可以附帶一些其它的參數，作為XMLHttpRequest實例的參數提交給服務端。

使用jQuery提供的ajax方法來發送二進制文件，還需要附加兩個參數：

processData: false // 不要對data參數進行序列化處理，默認為true
contentType: false // 不要設置Content-Type請求頭，因為文件數據是以 multipart/form-data 來編碼

Flash上傳

很多時候上傳的需求要求顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，于是產生了使用Flash上傳的方式，它采用Flash作為一個中間代理層，代替客戶端跟服務端通信，此外，它也對客戶端的文件選擇方面擁有更多的控制權，比input[type=”file”] 要大得多。

在這里我使用了jQuery封裝好的uploadify插件來進行演示，一般這類插件都自帶了上傳用的Flash文件，因為跟服務端回傳的數據和展示跟客戶端的交互，都是Flash文件的接口跟插件來對接的。

html部分很簡單，預留一個hook后，插件會在這個節點內部創建Flash的object，并且還附帶創建了上傳進度、取消控件和多文件隊列展示等界面。

$(function() {$("#file_upload").uploadify({auto: true,method: "Post",width: 120,height: 30,swf: './uploadify.swf',uploader: 'http://uploadUrl',formData: {token: $("#token").val()},fileObjName: "file",onUploadSuccess: function(file, data, response){// 根據返回結果指定界面操作}}); });

關于jQuery.uploadify可以訪問了解：http://www.uploadify.com/documentation/。值得注意的是flash并不適合手機端應用，更好的解決方案是使用flash+html5來解決平臺的兼容性問題。

截圖粘貼上傳

我們發現現在有好多上傳應用已經提供了截圖粘貼上傳功能，如WebUploader，它就支持QQ截圖然后粘貼上傳。

首先，截圖粘貼上傳的核心思想是，監聽粘貼事件，然后獲取剪切板中的數據，如果是一張圖片，則觸發上傳事件。

代碼片段如下：

$("textarea").on("paste", function(e){e.stopPropagation();var self = this;var clipboardData = e.originalEvent.clipboardData;if (clipboardData.items.length <= 0) {return;}var file = clipboardData.items[0].getAsFile();if (!file) {return;}var formData = new FormData();formData.append("file", file);formData.append("token", $("#token").val());$.ajax({url: "http://uploadUrl",type: "POST",data: formData,}).done(function(response) {// 根據返回結果指定界面操作});e.preventDefault(); });

從上面代碼可以看出，上傳的過程都是一樣的，主要是獲取文件的方式。當進行粘貼（右鍵paste/ctrl+v）操作時，觸發剪貼板事件’paste’，從系統剪切板獲取內容，而系統剪切板的數據在不同瀏覽器保存在不同的位置：

IE內核：windows.clipboardData
其它：e.originalEvent.clipboardData

拖拽上傳

拖拽上傳的方式，支持的瀏覽器比較少，因為它用到了HTML5的兩個新的屬性（API）一個是Drag and Drop,一個是File API。

上傳域監聽拖拽的三個事件：dragEnter、dragOver和drop，分別對應拖拽至、拖拽時和釋放三個操作的處理機制，當然你也可以監聽dragLeave事件。

HTML5的File API提供了一個FileList的接口，它可以通過拖拽事件的e.dataTransfer.files來傳遞的文件信息，獲取本地文件列表信息。

File API在HTML5規范中只是草案，在 W3C 草案中，File 對象只包含文件名、文件類型和文件大小等只讀屬性。但部分瀏覽器在草案之外提供了一個名為 FileReader 的對象，用以讀取文件內容，并且可以監控讀取狀態，它提供的方法有： “readAsBinaryString” ，”readAsDataURL” ，”readAsText” ，”abort” 等。

代碼片段如下：

// dragenter$("#textarea").on("dragenter", function(e){e.preventDefault(); });// dragover$("#textarea").on("dragover", function(e){e.preventDefault(); });// drop$("#textarea").on("drop", function(e){e.stopPropagation();e.preventDefault();var files = e.originalEvent.dataTransfer.files;_.each(files, function(file) {if (!/^image*/.test(file.type)) {return;}var fileReader = new FileReader();fileReader.onload = function() {//uploadFile(file);};fileReader.readAsDataURL(file);}); });

拖拽上傳過程中的幾個關鍵點：

在drop事件觸發后通過e.dataTransfer.files獲取拖拽文件列表，在jQuery中是e.originalEvent.dataTransfer.files
拖拽上傳僅支持圖片，文件對象中file.type標識了文件類型。
由于可能是多圖拖拽，所以可以遍歷圖片上傳，這里用了Underscore的each方法。
這里用readAsDataURL讀取文件內容為二進制文件，你還可以將其轉換為Base64方式上傳，只是http協議里面存在對非二進制數據的上傳大小限制為2M。
上傳的過程跟前面的方式相同，即：創建FormData對象并發起Ajax請求。

拍照上傳

拍照上傳可以是PC上的攝像頭拍照上傳也可以是手機等移動設備的拍照上傳。手機上的拍照上傳最常見就是我們使用微信發照片了。

手機實現拍照上傳的代碼：

ios 有拍照、錄像、選取本地圖片功能，部分android只有選取本地圖片功能。

上傳與安全

上傳文件時必須做好文件的安全性，除了前端必要的驗證，如文件類型、后綴、大小等驗證，重要的還是要在后臺做安全策略。

這里我列舉幾個注意點：

后臺需要進行文件類型、大小、來源等驗證
定義一個.htaccess文件，只允許訪問指定擴展名的文件。
將上傳后的文件生成一個隨機的文件名，并且加上此前生成的文件擴展名。
設置上傳目錄執行權限，避免不懷好意的人繞過如圖片擴展名進行惡意攻擊，拒絕腳本執行的可能性。

總結

以上是生活随笔為你收集整理的Web文件上传方法总结大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。