html上传zip,原生 js上传zip压缩文件

首页 > 其他分享> 文章详细

原生 js上传zip压缩文件

2020-03-27 11:04:10阅读：155来源：互联网

.success-box{

display: flex;

align-items: center;

}

#img{

margin-right: 8px;

width: 20px;

}

#okFile{

text-align: left;

color: #ccc;

}

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("用户已取消上传或浏览器断开了连接");

}

上传

请上传压缩文件

选择文件