JS异步上传文件

Posted raorao1994

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于JS异步上传文件的主要内容,如果未能解决你的问题,请参考以下文章

利用ajaxfileupload.js异步上传文件

Node.js——异步上传文件

异步无刷新上传文件而且上传文件能够带上參数

一个异步文件上传的方式

SpringMVC + AJAX 实现多文件异步上传

jquery异步上传图片