<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户资料上传</title>
</head>
 
<style type="text/css">
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h1{
text-align: center;
}
form{
text-align: center;
}
.row1{
position:relative;
/* display:inline-block; */
/* padding:8px 16px; */
font-size:16px;
/* color:white; */
text-decoration:none;
cursor:pointer;
overflow:hidden;
width: 300px;
}
.row1 dl{
display: flex;
border: 1px solid #ccc;
line-height: 30px;
border-radius: 2px;
align-items: center;
font-size: 14px;
padding: 0 4px;
justify-content: space-between;
}
.row1 dl dt{
color: #ccc;
}
.row1 dl dd{
color: #3399FF;
cursor: pointer;
}
.oFile {
position:absolute;
width:100%;
height:100%;
z-index:10;
top:0px;
left:0px;
opacity:0;
}
.btn{
width: 100px;
line-height: 32px;
border-radius: 4px;
background: #3399FF;
color: #fff;
text-align: center;
cursor: pointer;
background: #169bd5;
border: none;
}
.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>

原生 js上传zip压缩文件的更多相关文章

  1. 原生js上传文件，使用new FormData()

    当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...

  2. js 上传txt格式文件

    判断文件是否为.txt格式: $(".delbao .file").on("change",function(){ var acceptType = $(thi ...

  3. 原生JS上传,实现预览并且兼容大部分IE

    // 前提条件: ie浏览器模式下,用户要允许ie默认的加载项:以下兼容ie的方法才会生效 // 图片上传预览 IE是用了滤镜 function previewImage(file) { var MA ...

  4. 原生JS和jQuery版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  5. PHP自动解压上传的rar文件

    PHP自动解压上传的rar文件   浏览:383 发布日期:2015/07/20 分类:功能实现 关键字: php函数 php扩展 大家都知道php有个zip类可直接操作zip压缩文件,可是用户有时候 ...

  6. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  7. HTML5+AJAX原生分块上传文件的关键参数设置

    processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...

  8. php上传zip文件在线解压文件在指定目录下，CI框架版本

    我从网上找的文件php在线解压zip压缩文件 文件为jy.php可以直接执行,但是怎样将其加到CI框架中呢?? jy.php文件 <?php header("content-Type: ...

  9. js上传整个文件夹

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  10. 前端js webuploader上传(导入)excel文件

    项目开发中用到导入(上传)Excel文件 我使用的是百度的webuploader: 1:下载:http://fex.baidu.com/webuploader/(官方下载/示例) 2:使用Web Up ...

随机推荐

  1. LiveGBS-GB28181国标流媒体接入安防摄像头或平台时目录结构设备树状展示图

    GB28181流媒体服务 具体介绍这边不多说,参考 https://www.liveqing.com/docs/products/LiveGBS.html 国标通道列表 树视图模式 播放演示 单击树节 ...

  2. Django事务

    1. 事务基础概念 1.1 什么是事务? 事务是具有以下特性(ACID)的数据库操作单元: 原子性 (Atomicity):事务是一个不可分割的工作单位,事务中的操作要么全部发生,要么全部不发生. 一 ...

  3. BOE（京东方）“照亮成长路”公益项目走进富平县 科技赋能教育树立可持续发展新标杆

    正值 2025年度"99公益日"之际,BOE(京东方)"照亮成长路"公益项目捐赠暨百堂故宫传统文化公益课落地仪式在陕西省富平县实验中学隆重举行.作为BOE(京东 ...

  4. P5689 [CSP-S2019 江西] 多叉堆

    P5689 [CSP-S2019 江西] 多叉堆 题意 维护一组树,有如下两种操作: 令 \(x\) 所在子树的根的父亲为 \(y\) 所在子树的根. 求 \(x\) 所在子树被 \(0\) 到 \( ...

  5. 数字asic流程实验（二） CIC滤波器简述

    数字asic流程实验(二) CIC滤波器原理简述 1.概述 本次实验需要实现的数字ASIC为一个CIC滤波器,CIC滤波器是一种FIR数字滤波器,其优点为结构简单,与一般的FIR数字滤波器相比,不需要 ...

  6. Nginx实现静态文件鉴权代理+Java示例

    Nginx配置文件 127.0.0.1_8965.conf server { listen 8965; server_name 127.0.0.1; # 文件请求 location /file/ { ...

  7. java -jar启动时报错：xx.jar中没有主清单属性

    1.问题背景 在使用SpringBoot架构搭建父子工程时,使用IDEA可以正常启动,但打成jar包后使用jar方式启动时,会报错xx.jar中没有主清单属性. 2.原因分析 原因主要是在使用jar方 ...

  8. RestTemplate入门

    它提供了多种访问远程http服务的方法,是一种简单便捷的访问restful服务模板类,是spring提供的用于访问Rest服务的客户端模板工具集. 1.搭建父模块 1)创建一个maven工程名为res ...

  9. STM32G431RBT6之LED灯02

    cubeMX根据引脚 选取这些引脚,设置为GPIO_Output除复用引脚之外的需要设置输出为High LED控制语句 <led.c> #include <led.c> voi ...

  10. 应用安全 --- 安卓安全 之 恋人精灵高级版hook脚本

    /** * Frida综合Hook脚本 - 字符串比较绕过 + Lua解密监控 * 功能1: 强制sub_7F9EF字符串比较函数返回1 (优先执行) * 功能2: 监控sub_13860A函数的Lu ...