js实现文件上传功能 后台使用MultipartFile
更新时间:2018年09月08日 14:27:06 作者:liuyazhuang
这篇文章主要为大家详细介绍了纯js实现最简单的文件上传功能,后台使用MultipartFile,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
本文为大家分享了js实现文件上传功能的具体代码,供大家参考,具体内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <!DOCTYPE html> < 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等于0 if (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; //计算出上次调用该方法时到现在的时间差,单位为s ot = new Date().getTime(); //重新赋值时间,用于下次计算 var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算 //上传速度计算 var speed = perload/pertime;//单位b/s var 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 > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 原生JS实现前端本地文件上传
- JS实现可视化文件上传
- JS+Struts2多文件上传实例详解
- vue.js 图片上传并预览及图片更换功能的实现代码
- php+croppic.js实现剪切上传图片功能
- JavaScript使用享元模式实现文件上传优化操作示例
- JS实现图片上传多次上传同一张不生效的处理方法
- js实现图片上传并预览功能
- vue.js图片转Base64上传图片并预览的实现方法
- Angularjs实现多图片上传预览功能
- JavaScript实现异步图像上传功能
- SpringBoot+Vue.js实现前后端分离的文件上传功能
- node.js自动上传ftp的脚本分享
- JS实现的文件拖拽上传功能示例
- Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
- JS和Canvas实现图片的预览压缩和上传功能
- JavaScript代码实现txt文件的上传预览功能
- js 实现 input type="file" 文件上传示例代码
- js实现上传图片预览的方法
- Servlet+Jsp实现图片或文件的上传功能具体思路及代码
- 上传图片预览JS脚本 Input file图片预览的实现示例
- JS实现上传图片的三种方法并实现预览图片功能
- js实现图片上传并正常显示
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- JS中使用FormData上传文件、图片的方法
- 客户端js判断文件类型和文件大小即限制上传大小
- js获取上传文件的绝对路径实现方法
- 原生JS和jQuery版实现文件上传功能
- 微信JSSDK上传图片
- 简单实现js上传文件功能
- JS文件上传神器bootstrap fileinput详解
- js实现上传图片之上传前预览图片
- Javascript图片上传前的本地预览实例
- 学习使用AngularJS文件上传控件
- JS简单实现文件上传实例代码(无需插件)
- 分享5个好用的javascript文件上传插件
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
webpack使用Symbol.toStringTag(Symbol.toStringTag用法)
Symbol.toStringTag是一个内置 symbol,它通常作为对象的属性键使用,对应的属性值应该为字符串类型,这个字符串用来表示该对象的自定义类型标签,这篇文章主要介绍了webpack使用Symbol.toStringTag(Symbol.toStringTag用法),需要的朋友可以参考下2024-02-02Highcharts 非常实用的Javascript统计图demo示例
官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可,本文实现的是一个学生成绩走势demo,有需求的朋友可以参考下哈,希望对大家有所帮助2013-07-07
最新评论