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

new FormData (form? : HTMLFormElement)

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

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的所有值

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

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

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

;(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);