成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

【方法】Html5實現(xiàn)文件異步上傳

justCoding / 1895人閱讀

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

1 簡介

開發(fā)文件上傳功能從來不是一件愉快的事，異步上傳更是如此，使用過iframe和Flash的上傳方案，也都感覺十分的別扭。本文簡要簡紹利用Html5的FormData實現(xiàn)文件的異步上傳，還可以實現(xiàn)上傳進度條和文件大小驗證等。服務(wù)端使用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文件大小驗證

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

$("#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服務(wù)端 6.1 maven依賴 

    commons-io
    commons-io
    2.5


    commons-fileupload
    commons-fileupload
    1.3.2
6.2 servlet-context.xml
6.3 Controller

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

@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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83093.html

相關(guān)文章

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

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

    NervosNetwork 評論0 收藏0

  • PHP_Ajax

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

    MiracleWong 評論0 收藏0

  • API

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

    lsxiao 評論0 收藏0

  • 上傳圖片本地預(yù)覽效果實現(xiàn)（兼容IE8）

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

    avwu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<