web前端js上传文件
前端用的js+easyui
Demo：
<html>
<head><meta charset="UTF-8"><title>XMLHttpRequest上传文件</title><script type="text/javascript">//图片上传var xhr;//上传文件方法function UpladFile() {var fileObj = document.getElementById("file").files[0]; // js 获取文件对象var url = "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址var form = new FormData(); // FormData 对象form.append("file", fileObj); // 文件对象xhr = new XMLHttpRequest(); // XMLHttpRequest 对象xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。xhr.onload = uploadComplete; //请求完成xhr.onerror = uploadFailed; //请求失败xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】xhr.upload.onloadstart = function(){//上传开始执行方法ot = new Date().getTime(); //设置上传开始时间oloaded = 0;//设置上传开始时，以上传的文件大小为0};xhr.send(form); //开始上传，发送form数据}//上传成功响应function uploadComplete(evt) {//服务断接收完文件返回的结果var data = JSON.parse(evt.target.responseText);if(data.success) {alert("上传成功！");}else{alert("上传失败！");}}//上传失败function uploadFailed(evt) {alert("上传失败！");}//取消上传function cancleUploadFile(){xhr.abort();}//上传进度实现方法，上传过程中会频繁调用该方法function progressFunction(evt) {var progressBar = document.getElementById("progressBar");var percentageDiv = document.getElementById("percentage");// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0if (evt.lengthComputable) {//progressBar.max = evt.total;progressBar.value = evt.loaded;percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";}var time = document.getElementById("time");var nt = new Date().getTime();//获取当前时间var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为sot = new Date().getTime(); //重新赋值时间，用于下次计算var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位boloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算//上传速度计算var speed = perload/pertime;//单位b/svar bspeed = speed;var units = 'b/s';//单位名称if(speed/1024>1){speed = speed/1024;units = 'k/s';}if(speed/1024>1){speed = speed/1024;units = 'M/s';}speed = speed.toFixed(1);//剩余时间var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';if(bspeed==0) time.innerHTML = '上传已取消';}</script>
</head>
<body>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>最初的jsp:
点击上传后：
OK~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
web前端js上传文件相关推荐
- 使用前端JS上传文件到阿里云的OSS服务器，PHP生成STS临时访问凭证
官方教程地址:https://help.aliyun.com/document_detail/383950.html?spm=a2c4g.383952.0.0 这篇文章主要是指出官方教程没有说明的地方 ...
- 七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片 一.七牛云简介 首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
- js上传文件到c 服务器,js上传文件到c服务器
js上传文件到c服务器 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
- ajax传图片以及后台接收,前端ajax上传文件，图片，后端nodejs接收文件；
前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端 用普通的ajax没法实现文件上传,只能post, ...
- 风尚云网学习-H5+css3+js上传文件页面提交不跳转
风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图: 众所周知,from表单提交后会自动跳转url, 此时我们可以用一个空的frame 接收,阻止跳转 废话不多说,上全部代码: < ...
- vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- JS上传文件（base64字符串和二进制文件流）
①以base64字符串上传(使用FileReader对象获取文件的base64字符串) FileReader参考文档: FileReader - Web API 接口参考 | MDN FileRead ...
- simple-uploader前端分片上传文件
前言 对于大型文件的上传处理,我们不可能只是单纯的把整个文件,通过一个请求去上传,这样效率很低,且上传速度很慢.所以这种时候就需要前端去对上传的文件做分割处理,将文件分成一小片一小片的,然后再同时发起 ...
- 关于原生html和js上传文件的处理
目录 基本结构 样式处理 为啥要做样式处理 怎么处理样式 input内用到的属性及用法 accept 可以上传的文件类型 获取上传后的文件 sth.files 字段解释 获取视频文件的时长 获取上传后 ...
- [原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
最新文章
- 学习压缩感知比较好的文章链接收藏
- tomcat升级_「shell脚本」懒人运维之自动升级tomcat应用（war包）
- GP官网上的TEE学习课程和费用介绍
- QT的QScrollArea类的使用
- 一个通过Flash设计与Flex结合开发的网站www.mapgle.cn
- 作者：项连城（1992-），女，中国科学院自动化研究所硕士生
- CVPR 2019 爆款论文作者现场解读：视觉语言导航、运动视频深度预测、6D姿态估计...
- 如何继承SWT组件？
- javascript Control flow(控制语句)
- 拒绝礼仪与技巧（转）
- 0804------算法笔记----------最长公共子序列
- Atitit 验证 数字验证 非空验证的最佳算法 h5
- System.Transactions.Diagnostics.DiagnosticTrace 的类型初始值设定项引发异常。配置系统未能初始化
- 数据湖：设计更好的架构、存储、安全和数据治理
- rootkit的检测
- OpenSTF手机设备管理平台-------二次开发
- 大数据相关面试题整理-带答案
- 当当年中庆，百万自营图书大放价，又有羊毛可以薅了
- pandas计算店家的每日营业额示例
- Grunt搭建自动化web前端开发环境--完整流程