zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    vs2008 当前上下文不存在名称xxx 解决办法
    SQL Server 2008故障转移集群+数据库镜像配置实例之一
    通过JavaScript获取页面大小
    使用JavaScript判断浏览器类型
    sql2008安装图解sql2008安装全过程
    Sqlserver中对时间类型的字段转换
    SQL Server 2008故障转移集群+数据库镜像配置实例之三
    这年头口罩都成时尚品
    一位软件工程师的6年总结[转]
    MS SQL Server查询优化方法[转]
  • 原文地址:https://www.cnblogs.com/raorao1994/p/10862752.html
Copyright © 2011-2022 走看看