JS異步上傳文件

直接調用Upload(option)方法，便可上傳文件，不須要額外的插件輔助，採用原生js編寫。

/*
    *異步上傳文件
    *option參數
    **url：上傳路徑
    **data:上傳的其餘數據{id："1"}
    **maxSize：文件最大值(單位M)
    * img:"#qrimg",
    **callback：回調函數（可空）
    **beforeSend:上傳前函數（可空）
    */
    function Upload(option) {
        var fd = new FormData(),
            xhr = new XMLHttpRequest(),
            input;
        if (document.getElementById('_RobinUploadInput')) {
            input = document.getElementById('_RobinUploadInput');
        } else {
            input = document.createElement('input');
            input.setAttribute('id', '_RobinUploadInput');
            input.setAttribute('type', 'file');
            input.setAttribute('name', 'file');
            document.body.appendChild(input);
            input.style.display = 'none';
        }
        input.click();
        input.onchange = function () {
            if (!input.value) { return; }
            if (option.maxSize && input.files[0].size > option.maxSize * 1024 * 1024) {
                alert("請上傳小於' + option.maxSize + 'M的文件");
                return;
            }
            if (option.beforeSend instanceof Function) {
                if (option.beforeSend(input) === false) {
                    return false;
                }
            }
            if (option.data) {
                for (var name in option.data) {
                    fd.append(name, option.data[name]);
                }
            }
            if (option.img) {
                var $img = $(option.img);
                var windowURL = window.URL || window.webkitURL;
                dataURL = windowURL.createObjectURL(input.files[0]);
                $img.attr('src', dataURL);
            }
            fd.append('Filedata', input.files[0]);
            xhr.open('post', option.url);
            xhr.onreadystatechange = function () {
                if (xhr.status == 200) {
                    if (xhr.readyState == 4) {
                        if (option.callback instanceof Function) {
                            option.callback(xhr.responseText);
                        }
                    }
                } else {
                    alert("上傳失敗");
                }
            }
            xhr.upload.onprogress = function (event) {
                var pre = Math.floor(100 * event.loaded / event.total);
                if (option.uploading instanceof Function) {
                    option.uploading(pre);
                }
            }
            xhr.send(fd);
        }
    }

資料獲取方式，關注公總號RaoRao1994，查看往期精彩-全部文章，便可獲取資源下載連接

更多資源獲取，請關注公總號RaoRao1994