码迷,mamicode.com
首页 > Web开发 > 详细

JS异步上传文件

时间:2019-05-14 16:26:52      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:ons   其他   最大   send   file   ==   upload   window   play   

直接调用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异步上传文件

标签:ons   其他   最大   send   file   ==   upload   window   play   

原文地址:https://www.cnblogs.com/raorao1994/p/10862752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!