社区首页 >专栏 >XMLHttpRequest2-FormData上传文件方法封装及进度条的实现

XMLHttpRequest2-FormData上传文件方法封装及进度条的实现

空空云

发布于 2018-09-27 03:58:51

1.2K00

代码可运行

文章被收录于专栏：大前端_Web大前端_Web

运行总次数：0

代码可运行

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利，使用FormData的最大优点就是我们可以异步上传一个二进制文件，兼容性需要IE10+。

构造函数

new FormData (form? : HTMLFormElement)

参数

form (可选)

一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

append 给当前FormData对象添加一个键/值对.

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]

formData.get("name"); // 获取key为name的第一个值
formData.getAll("name"); // 返回一个数组，获取key为name的所有值

-set

我们可以通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

delete

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []

entries 返回一个 iterator对象，此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 USVString 对象；value是一个 USVString , 或者 Blob对象。

FormData上传文件方法的封装

;(function (window, document) {
    /**
     * @param selector : jquery selector
     * @param url : url of upload
     * @param file : object of file
     * @param beforeSend : function of validate
     * @param successF : function of success
     * @param errorF : function of error
     * @param uploadProgress : function of uploadProgress
     * @param otherRequestData : object of  otherRequestData
     * */
    var myUpload = function (option) {

        var file, formData, xhr, loadedevt, total, per, Url,  uploading;

        formData = new FormData();
        xhr = new XMLHttpRequest();
        url = option.url;
        file = option.file;

        //上传数据之前对数据的校验，常规包括不能null，文件类型，大小的限制
        if (option.beforeSend instanceof Function) {
            if (option.beforeSend(file) === false) { //校验在回调函数里实现，返回false校验不通过
                return false;
            }
        }

        //校验成功formData追加文件
        formData.append("files", file);

        //append 其他数据
        if(option.otherRequestData instanceof Object) {
            var _requestDate = option.otherRequestData;
            for(var key in _requestDate) {
                formData.append(key, _requestDate[key]);
            }
        }


        //事件回调
        // event callbacks
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) {
                    option.successF instanceof Function && option.successF(xhr.responseText);
                }
                else {
                    option.errorF instanceof Function && option.errorF(xhr.responseText);
                }
            } else {
                option.errorF instanceof Function && option.errorF();
            }
        };

        //侦查当前附件上传情况
        /**
         * 附件的上传进度条方法在xhr.upload.onprogeress上，
         * 还有一个xhr.onprogress,是下载时候的进度条,***
         * */
        xhr.upload.onprogress = function (event) {
        // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
         if (evt.lengthComputable) {
            loadedevt = event.loaded;
            total = event.total;
            per = Math.floor(100 * loadedevt / total);

        }
            //执行回调
            option.uploadProgress instanceof Function && option.uploadProgress(per);

        };

        xhr.open("post", url, true); //不能是GET, get请求数据发送只能拼接在URL后面
        xhr.setRequestHeader('Accept', 'application/json, text/javascript');

        xhr.send(formData);

    };

    window.myUpload = myUpload;
})(window, document);