.success-box{ display: flex; align-items: center; } #img{ margin-right: 8px; width: 20px; }
#okFile{ text-align: left; color: #ccc; }
</style> <script> function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; const okFileName = document.getElementById('okFile').innerHTML; if(okFileName){ alert('只能选择一个文件') return; } if(file.type !== "application/zip") { alert('请选择正确的zip类型文件') return; } if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = file.name; } }
function uploadFile() { var fd = new FormData(); const file = document.getElementById('fileToUpload').files[0]; if(!file) return; fd.append('token', 'a1ca50cd8aae4df09e75ddc076f84465') fd.append('dictTerminalType', 6); fd.append('serialId', Math.random().toString(36).substr(2) + new Date().getTime()); fd.append("file", file); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", 'http://xxxxxx'); //修改成自己的接口 xhr.send(fd); }
function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); // document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } }
function getUploadStatus({fileId, companyId}) { let requestData = '' let data = { dictTerminalType: 6, serialId: Math.random().toString(36).substr(2) + new Date().getTime(), fileId, companyId } for(let key in data){ requestData = requestData + key + "=" + data[key] + "&"; } if(requestData == ''){ requestData = ''; }else{ requestData = requestData.substring(0,requestData.length - 1); } var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ //complete if(xhr.readyState == 4){ if(xhr.status == 200){ //请求成功执行的回调函数 let data=JSON.parse(xhr.response) alert(data.message); document.getElementById('img').src = './完成.png'; document.getElementById('fileSuccess').innerHTML = document.getElementById('fileName').innerHTML; document.getElementById('okFile').innerHTML = '已上传文件'; }else{ //请求失败的回调函数 alert(err.message); } } } xhr.open("POST", 'http://xxxxx); //修改成自己的接口 xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8"); xhr.send(JSON.stringify(data)); }
function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]); return null; }
// 上传成功后 function uploadComplete(evt) { /* 服务器端返回响应时候触发event事件*/ let {fileId} = JSON.parse(evt.target.responseText).data // getUploadStatus({fileId, companyId: getQueryString('companyId')}) }
// 上传时出错 function uploadFailed(evt) { alert("尝试上传文件时出错。"); }
function uploadCanceled(evt) { alert("用户已取消上传或浏览器断开了连接"); } </script> <body> <div> <h1>上传</h1> <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx"> <div class="row1"> <dl> <dt id="fileName">请上传压缩文件</dt> <dd>选择文件</dd> </dl> <input class="oFile" accept='application/zip' type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"> </div> <input class="btn" type="button" onclick="uploadFile()" value="请确认上传"> <p id="okFile"></p> <div class="success-box"> <img id="img" /> <div id="fileSuccess"></div> </div> </form> </div> </body> </html>