//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);
}
})();
}