【方法】Html5實現文件異步上傳

justCoding 發布于2019-08-20 16:41 / 1823人閱讀

摘要：簡介開發文件上傳功能從來不是一件愉快的事，異步上傳更是如此，使用過和的上傳方案，也都感覺十分的別扭。本文簡要簡紹利用的實現文件的異步上傳，還可以實現上傳進度條和文件大小驗證等。服務端使用的方案進行處理。

1 簡介

開發文件上傳功能從來不是一件愉快的事，異步上傳更是如此，使用過iframe和Flash的上傳方案，也都感覺十分的別扭。本文簡要簡紹利用Html5的FormData實現文件的異步上傳，還可以實現上傳進度條和文件大小驗證等。服務端使用springMVC的方案進行處理。

2 Html代碼

3 JQuery上傳

$("#submit-btn").on("click", function() {
    $.ajax({
        url:"/test/upload",
        type:"post",
        data:new FormData($("#myForm").get(0)),
        //十分重要，不能省略
        cache: false,
        processData: false,
        contentType: false,
        success: function () {
            alert("上傳成功！");
        }
    });
});

4 JQuery文件大小驗證

文件大小的及相應行為的控制，需根據需要自行處理，本方法只是示例方法。

$("#u_photo").on("change", function() {
    var file = this.files[0];
    if (file.size > 1024*1000) {
        alert("文件最大1M！")
    }
});

5 JQuery進度條

在ajax方法中加入xhr即可控制上傳進度，進度條可以使用html5的progress也可使用其它的進度條。顯示及隱藏進度條需要自行處理，本方法只是簡單介紹了進度條的基本控制。

xhr: function() {
    var myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
        myXhr.upload.addEventListener("progress", function(e) {
            if (e.lengthComputable) {
                $("progress").attr({
                    value: e.loaded,
                    max: e.total,
                });
            }
        } , false);
    }
    return myXhr;
}

6 springMVC服務端 6.1 maven依賴


    commons-io
    commons-io
    2.5


    commons-fileupload
    commons-fileupload
    1.3.2

6.2 servlet-context.xml

6.3 Controller

示例程序，并未給出文件驗證，存儲及處理的相應代碼。

@RequestMapping(value="/test/upload",method = RequestMethod.POST)
@ResponseBody
public String upload(@RequestParam("u_photo") MultipartFile u_photo) {
    System.out.println("u_photo="+u_photo.getSize());
    return "ok";
}

7 兼容性

IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

8 推薦閱讀

如果對上述方案不滿意，推薦使用如下的解決方案：

JQuery File Uploader

GPU云服務器云服務器異步文件上傳 Java異步上傳文件文件異步上傳文件到云服務器 ie8異步上傳文件

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

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

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

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

NervosNetwork 2019-08-22 15:57 評論0 收藏0
PHP_Ajax

摘要：簡介業務做一個在線投票，給歌手投票。提交到當前頁面的中達到效果。用戶名密碼注冊總結在不使用對象的情況下，依然可以用來實現對后臺服務器的請求，同時不帶來頁面刷新或者跳轉。 ajax 簡介業務：做一個在線投票，給歌手投票。要求：無刷新，并且不允許使用XMLHttpRequest對象.分析:在XHR對象，沒有流行之前，已經有了無刷新這種效果的方法. 從http角度看，可以利用204 No...

MiracleWong 2019-06-27 15:05 評論0 收藏0
API

摘要：是一個極度純凈的上傳插件，通過簡單調整就可以融入到任何項目，支持多文件上傳上傳速率動態控制真實進度監控分塊生成分塊上傳校驗秒傳暫停取消等。跨域學習筆記前言: 當一個資源，向與之所在服務器不同的域或端口請求另一個資源時，這個HTTP請求，我們認為是跨域的請求。出于安全考慮，瀏覽器會限制腳本發起的跨域HTTP請求。那天后端讓我把token放到http請求頭字段里，說是為了和RN端統一...

lsxiao 2019-08-21 18:25 評論0 收藏0
上傳圖片本地預覽效果實現（兼容IE8）

摘要：以上傳圖片為例。我們可以通過獲取上傳的圖片相關信息，但是想要實現本地預覽還需要借助來實現可以讀取本地圖片，并將圖片數據轉換成編碼的字符串形式嵌入到頁面中。在我們實現上傳圖片的效果里，就有用到。圖片預覽兼容處理及以下版本不支持和。最近項目里需要用到上傳圖片并預覽的功能，于是寫了個jQuery預覽圖片插件，下載地址。如果有需要的，可以直接下載。第一次寫jQuery插件，如有不對之處，歡迎...

avwu 2019-08-20 16:54 評論0 收藏0