XMLHttpRequest使用说明

//xhr[i].readyState 属性说明:

//0:UNSENT - 对象已经创建,但open()方法还没有被调用。

//1:OPENED - open()方法已经被调用,但send()方法还没有被调用。

//2:HEADERS_RECEIVED - send()方法已经被调用,并且服务器已经响应了请求的头部。

//3:LOADING - 正在从服务器接收响应。这个值通常用于指示已经收到了部分数据。

//4:DONE - 从服务器接收到了整个响应。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求的类型和URL
xhr.open('GET', 'https://example.com/api/data');

// 设置响应类型
xhr.responseType = 'json';

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    // 请求完成
    if (xhr.status === 200) {
      // 请求成功
      console.log(xhr.response);
    } else {
      // 请求失败
      console.log('请求失败:' + xhr.status);
    }
  }
};

// 发送请求
xhr.send();

Aurora独立封装接口上传文件,带滚动条

<a:box>
    <form name="fileForm" enctype="multipart/form-data" method="post" style="margin-top:10px;margin-left:20px;font-size: 20px;">
        <a:box row="1">
            <input name="textfield" id="textfield" class="txt" placeholder="请选择要上传的文件" type="text"/>
            <input class="btn btn1" onclick="btnClick()" type="button" value="附件上传"/>
            <input name="fileField" id="fileField" class="file" multiple="multiple" onchange="fileSelectChange(this)" type="file"/>
            <div id="bar-warp">
                <div id="bar"/>
            </div>
        </a:box>
    </form>
</a:box>
function canUpload(file_type) {
                //判断文件类型是否支持
                var records = $au('support_file_type_list_ds').getAll();
                for (var i = 0;i < records.length;i++) {
                    var record = records[i];
                    // console.log(record.get('file_type'));
                    if (record.get('file_type') == file_type) {
                        return true;
                    }
                }
                return false;
            }
            
            function getFileTypeStr() {
                var fileTypeStr;
                var records = $au('support_file_type_list_ds').getAll();
                for (var x = 0;x < records.length;x++) {
                    var record = records[x];
                    if (fileTypeStr) {
                        fileTypeStr = fileTypeStr + ';' + record.get('file_type');
                    } else {
                        fileTypeStr = record.get('file_type');
                    }
                }
            
                return fileTypeStr;
            }
            
            function btnClick() {
                document.getElementById('fileField').click();
            }
            
            function fileSelectChange(item) {
            
                document.getElementById('textfield').value = item.value;
            
                //系统设置的最大文件大小(M)
                var defFileMaxSize = '${/model/inrtface_info/record/@file_max_size}';
                var maxSize = parseInt(defFileMaxSize);
                if (maxSize == 'NaN' || !maxSize) {
                    maxSize = 50;
                }
            
                //循环判断文件大小
                if (item.files) {
                    for (var i = 0;i < item.files.length;i++) {
            
                        //格式是否允许判断
                        var lastDotNum = item.files[i].name.lastIndexOf(".") + 1;
                        var fileLastName = item.files[i].name.substring(lastDotNum).toLowerCase();
            
                        if (!canUpload(fileLastName) && item.value != "") {
                            var fileTypeStr = getFileTypeStr();
                            Aurora.showMessage('提示', fileLastName + '格式文件不支持,建议将文件打包为zip或rar上传。' + '<br>' + '[支持格式:' + fileTypeStr + ']', null, 700, null);
                            item.value = "";
                            return;
                        }
                        //文件大小判断
                        var thisFileSize = item.files[i].size / 1024 / 1024; //单位kb
                        if (thisFileSize > maxSize) { //空白的Excel表最大为10.1KB,当小于它及判断为Excel内容为空
                            Aurora.showMessage('提示', '上传文件单个文件大小不能超过20M!');
                            item.value = "";
                            return;
                        }
            
                    }
                    submitFile(); //上传文件
                }
            }
            //解析
            
            function getResp(responseText) {
                var str;
                var resultMsg;
                var resultCode;
            
                var resp = JSON.parse(responseText);
            
                resultCode = resp.code;
            
                if (resultCode == '0' || resultCode) {
                    console.log('success');
                    if (resultCode == '0') {
                        return resultCode;
                    } else {
                        resultMsg = resp.msg;
                    }
                } else {
                    resultCode = '-1';
                    resultMsg = resp.error.message;
                }
            
                str = '[' + resultCode + ',' + resultMsg + ']';
                return str;
            }
            
            function submitFile() { //逐个发送
                document.getElementById('bar').style.width = 1 + '%';
                document.getElementById('bar').innerHTML = Math.floor(1) + '%';
            
                var uploadCount = 0; //有返回结果的个数
                var fileValue = document.getElementById('fileField').value;
                var files = document.getElementById('fileField').files;
                if (fileValue == '' || !fileValue) {
                    return;
                }
                var allFilecount = files.length;
            
                var f = (function() {
            
                    var xhr = [];
                    for (var i = 0;i < allFilecount;i++) {
                        (function(i) {
                            xhr[i] = new XMLHttpRequest();
                            xhr[i].open("POST", upload_url, true);
                            xhr[i].onreadystatechange = function() {

                                if (xhr[i].readyState === 4) {
                                    if (xhr[i].status === 200) {
            
                                        console.log('responseText :' + xhr[i].responseText);
                                        //结果解析
                                        var respStr = getResp(xhr[i].responseText);
            
                                        if (respStr == '0') {
                                            //更改进度条,及百分比
                                            uploadCount++;
                                            var precent = 100 * uploadCount / allFilecount;
                                            document.getElementById('bar').style.width = precent + '%';
                                            document.getElementById('bar').innerHTML = Math.floor(precent) + '%';
            
                                            if (precent == 100 || (uploadCount > 10 && (uploadCount % 10) == 0)) {
                                                $au('list_ds').query();
                                            }
                                        } else {
                                            //请求异常
                                            Aurora.showMessage('提示', '文件上传出现异常:' + respStr);
            
                                            document.getElementById('bar').style.width = 0 + '%';
                                            document.getElementById('bar').innerHTML = 0 + '%';
                                            document.getElementById('fileField').value = null;
            
                                            return;
                                        }
                                    } else {
            
                                        //请求异常 <>200
                                        Aurora.showMessage('提示', '文件上传出现异常![status:' + xhr[i].status + ']');
            
                                        document.getElementById('bar').style.width = 0 + '%';
                                        document.getElementById('bar').innerHTML = 0 + '%';
                                        document.getElementById('fileField').value = null;
            
                                        return;
                                    }
                                }
                            };
            
                            try {
                                var fd = new FormData();
                                fd.append("fileField", document.getElementById('fileField').files[i]);
            
                                xhr[i].send(fd);
                            } catch (e) {
                                Aurora.showInfoMessage('${l:PROMPT}', '上传失败文件,请稍后再试');
                            }
                        })(i);
                    }
            
                })();
            }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值