H5特性之FormData不刷新文件上傳

vincent_xyb 發布于2019-08-21 10:34 / 745人閱讀

摘要：雜言之前朋友說的不刷新上傳文件。最暴力的解決方案就是上網上搜各種庫，附帶多圖上傳，預覽，甚至是圖片處理等特技。但是是個好東西，他提供了，可以幫助我們拼湊參數，乃至文件資源。測試上傳可以看到請求到了看下，就可以看到返回的相關信息了。

雜言

??之前朋友說的不刷新上傳文件。最暴力的解決方案就是上網上搜各種JS庫，附帶多圖上傳，預覽，甚至是圖片處理等特技。那么如果不接觸第三方的庫，可不可以利用ajax來做。就這個問題，有人給出的解決方案是借助iframe,這里就不贅述了。但是Html5是個好東西，他提供了FormData，FormData可以幫助我們拼湊參數，乃至文件資源。這樣，我們就可以輕松用$.ajax不刷新上傳。當然也不需要iframe。

代碼

下列是前端部分。

不多贅述里面的代碼，就講一行代碼
var data = new FormData($("#add")[0]);

FormData是一個表單對象，他可以將表單對象的表單域分別形成key=>value。那么是不是我們自己再拼接額外的key=>value呢，答案是可以的，詳情可以百度FormData。

還有就是為什么是$("#add")[0]?
我只能說 js = jQuery[0];

PHP部分

這邊只是做下測試，如果能看到$_FILES有東西，那么證明我們是可以做上傳的。

測試上傳

可以看到ajax請求到了ajax.php

看下preview，就可以看到返回$_FILES的相關信息了。

GPU云服務器云服務器 formdata上傳文件無刷新文件上傳 h5 js 文件上傳無刷新上傳文件iframe

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

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

H5拖放+FormData接口+NodeJS，完整異步文件上傳（一）

摘要：前段時間面試過程中，頻繁遇到異步文件上傳的相關問題。所以，這會是一個拖放接口實現文件異步上傳的完整。監聽放置元素的事件，通過對象可以獲得拖拽事件的狀態及數據。后端文件接收保存后端使用實現文件上傳。 ??前段時間面試過程中，頻繁遇到H5異步文件上傳的相關問題。還遇到過一個通過H5拖放功能實現文件異步上傳的問題，大概知道H5有新增拖拽功能可以接收文件，如何異步上傳文件就母雞了(攤手)。面試...

NervosNetwork 2019-08-22 15:57 評論0 收藏0
一步一步搭建一個圖片上傳網站（后臺服務器用nodejs）

摘要：把文件上傳路徑指定到然后用當前日期和文件名命名上傳過來的文件。后端利用建立服務器，利用中間件指定文件路徑。利用這個前端和后端技術，我們基本上就可以做出一個圖片上傳存儲的基本網站核心。前幾天看了騰訊云社區的一個文件上傳的文章文件上傳那些事兒，大體上講了以下h5中圖片上傳的幾個核心原理，但是沒有后端接受的服務器代碼，沒法做測試。也沒有具體的一個實例都是一些基本的原理片段，并且ui界面也不...

Darkgel 2019-08-20 16:21 評論0 收藏0
H5拖放異步文件上傳之二——上傳進度監聽

摘要：添加功能顯示待上傳文件列表支持移除待上傳文件使用顯示上傳進度支持中斷上傳方法返回一個對象，用來表示上傳的進度。監聽數據傳輸進行中通過監聽這個事件，可獲得上傳進度。 ??上一篇《H5拖放+FormData接口+NodeJS，完整異步文件上傳（一）》，我們走通了拖放文件上傳的整個流程，但離實際使用場景還有差距。這篇，我們來添加幾個實際使用場景必要的功能，向實際使用再走一步。添加功能顯...

Godtoy 2019-08-22 16:20 評論0 收藏0