input[type=file] 異步上傳文件

silencezwm 發布于2019-08-20 15:50 / 613人閱讀

摘要：通過給標簽綁定事件，獲取上傳的文件，異步上傳。而通過的屬性獲取的上傳文件被格式化為二進制形式。解決方案跨域異步提交工具使用非提交上傳文件大小超過限制此外，還可以借助插件實現異步上傳文件

背景

UI如圖所示，其中有一個拍照圖標，點擊后要選擇拍照或者從相冊中選擇要上傳的圖片。

拍照上傳部分的代碼如下

html部分

css部分

.take-phote-picture{
    margin: 10px 20px;
    width: 100px;
}

.select-picture{
    opacity: 0;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 70px;
    border-radius: 50px;
}

設計思路

將一個input[type="file"]的透明度設置為0，懸浮在img標簽之上。通過給input標簽綁定change事件，獲取上傳的文件，異步上傳。

問題

通過ajax的data屬性提交到后臺的數據必須是鍵值對（key-value）的形式，其中值value不能為二進制數據。而通過input的files屬性獲取的上傳文件被格式化為二進制形式。

解決方案

define([], function () {
    /**
     * 跨域異步post提交工具 使用Formdata,非iframe 提交
     */

    var ifajax = function(_url){
        var data = new FormData();
        var obj ={};

        obj.appendInput = function (input_obj) {
            if (input_obj.files) {
                for (var i = 0; i < input_obj.files.length; i++) {
                    data.append(input_obj.name, input_obj.files[i]);
                }
            } else {
                data.append(input_obj.name, input_obj.value);
            }
            return this;
        };

        obj.submit = function (success,err) {
            var xhr = new XMLHttpRequest();
            var url = _url||"/club/apiv1/me/b64-upload";

            xhr.open("POST", url, true);
            xhr.setRequestHeader("Accept", "*/*");
            xhr.onload = function () {
                if (xhr.status == 200) {
                    if (xhr.responseText) {
                        try {
                            //console.log(xhr);
                            var json = $.parseJSON($.trim(xhr.responseText));
                            success && success(json);
                        } catch (e) {
                            err && err("parse error", xhr.responseText);
                        }
                    }
                } else {
                    var message = xhr.responseText, code = xhr.status;
                    if (code === 413) {
                        message = "上傳文件大小超過限制"
                    } else {
                        try {
                            var json = $.parseJSON(xhr.responseText);
                            message = json.message;
                            code = json.code;
                        } catch (e) {

                        }
                    }

                    err && err (code, message);
                }
            };
            xhr.send(data);
            return;
        }

        return obj;
    };

    return ifajax;
});

此外，還可以借助插件ajaxFileUpload實現異步上傳文件

GPU云服務器云服務器 jquery_input_type input file 異步文件上傳 Java異步上傳文件

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

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

圖片上傳方案詳解

摘要：以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。構造函數返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。繼續使用上文的讀取圖片讀取完成是格式的圖片我們將上的設為讀取的結果即可實現預覽功能。以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。知識點字典 input 標簽之 file 類型 FileReader ...

glumes 2019-08-02 13:59 評論0 收藏0
圖片上傳方案詳解

摘要：以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。構造函數返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。繼續使用上文的讀取圖片讀取完成是格式的圖片我們將上的設為讀取的結果即可實現預覽功能。以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。知識點字典 input 標簽之 file 類型 FileReader ...

Karuru 2019-08-23 14:27 評論0 收藏0
前端圖片上傳解決方案

摘要：圖片上傳是前端開發中經常使用到的，上傳方案也有很多種吧，可能你有在使用一些插件完成上傳，比如我以前自己寫的一個后臺系統現在在這里總結下圖片上傳的解決方案。構造函數返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。 showImg(https://segmentfault.com/img/bVbmLXM?w=500&h=500); 圖片上傳是前端開發中經常使用到的，上傳...

Seay 2019-08-30 15:55 評論0 收藏0
前端圖片上傳解決方案

摘要：圖片上傳是前端開發中經常使用到的，上傳方案也有很多種吧，可能你有在使用一些插件完成上傳，比如我以前自己寫的一個后臺系統現在在這里總結下圖片上傳的解決方案。構造函數返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。 showImg(https://segmentfault.com/img/bVbmLXM?w=500&h=500); 圖片上傳是前端開發中經常使用到的，上傳...

Acceml 2019-08-02 14:03 評論0 收藏0