HTML
<div class="btnInputDIv">
<span class="btnSpan">上传文件 </span>
<input class="btnInput" type="file">
</div>
</div>
CSS
color: #fff;
background-color: #409eff;
border-color: #409eff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.btnInput {
display: none;
padding: 9 px 15 px;
font-size: 12px;
border-radius: 3 px;
}
javascript
document.querySelector(".btnSpan").addEventListener('click', () => {
document.querySelector("input[type='file']").value = "";
document.querySelector("input[type='file']").click()
})
document.querySelector("input[type='file']").addEventListener('change', (e) => {
console.log(e.target.files)
startUpload(e.target.files);
})
function startUpload(file) {
let url = 'http://10.16.241.49:9002'
var uploadUrl = `${url}/mcgjbw/AuthorizedPaymentImport/importDataFromText`;
// 手工构造一个 form 对象
var formData = new FormData();
formData.append('files', file); // 'files' 为HTTP Post里的字段名, files 对浏览器里的File对象
// 手工构造一个请求对象,用这个对象来发送表单数据
// 设置 progress, load, error, abort 4个事件处理器
var request = new XMLHttpRequest();
request.upload.addEventListener("progress", window.evt_upload_progress, false);
request.addEventListener("load", window.evt_upload_complete, false);
request.addEventListener("error", window.evt_upload_failed, false);
request.addEventListener("abort", window.evt_upload_cancel, false);
request.open("POST", uploadUrl); // 设置服务URL
request.setRequestHeader("Content-type","multipart/form-data; charset=utf-8");
request.send(formData); // 发送表单数据
window.evt_upload_progress = function (evt) {
if (evt.lengthComputable) {
var progress = Math.round(evt.loaded * 100 / evt.total);
Af.log("上传进度: " + progress);
}
};
window.evt_upload_complete = function (evt) {
if (evt.loaded == 0) {
Af.log("上传失败!");
}
else {
Af.log("上传完成!");
var response = JSON.parse(evt.target.responseText);
Af.log(response);
}
};
window.evt_upload_failed = function (evt) {
Af.log("上传出错");
};
window.evt_upload_cancel = function (evt) {
Af.log("上传中止!");
};
};
</script>