原生JS实现前端本地文件上传


Posted in Javascript onSeptember 08, 2018

本文实例为大家分享了JS实现前端本地文件上传的具体代码,供大家参考,具体内容如下

通过input type = file来选择本地文件

<div>
  <form>
    <input type="file" id="file-input" name="fileContent">
  </form>
</div>
var fileInput = document.querySelector('#file-input');
fileInput.onchange = function(){
  console.log('文件名:',this.value)
  var formData = new FormData(this.form);
  console.log(formData)
}
//打印出的结果是文件名: C:\fakepath\css.jpg然后在是一个空对象

使用formData无法得到文件的内容,那么就使用FileReader来读取整个文件的内容

var fileInput = document.querySelector('#file-input');
fileInput.onchange = function(){
 var filereader = new FileReader();
 var fileType = this.files[0].type;
 filereader.onload = function(){
   if(/^image\[jpeg|png|gif]/.test(fileType)){
     console.log(this.result);
   }
 }
 console.log(this.files[0]);
 filereader.readAsDataURL(this.files[0]);
}
console.dir(fileInput);

从打印结果来看,能清楚的知道上传的文件信息是在input type = ‘file'dom对象中的files[0]中。
filereader.readAsDataURL是将flies[0]里的信息转换成base64方式读取。
filereader的读取为以下格式:

  • readAsDataURL(this.files[0]) base64位读取
  • readAsBinaryString(this.files[0]) 以二进制方式读取读取结果是UTF-8形式(被废弃)
  • readAsArrayBuffer(this.flies[0]) 以二进制原始方法读取,读取结果可转换成整数的数组
var files = document.getElementById('pic').files; 
//files是文件选择框选择的文件对象数组

if(files.length == 0) return; 

var form = new FormData(), 
  url = 'http://.......', //服务器上传地址
  file = files[0];
form.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open("post", url, true);

//上传进度事件
xhr.upload.addEventListener("progress", function(result) {
  if (result.lengthComputable) {
    //上传进度
    var percent = (result.loaded / result.total * 100).toFixed(2); 
  }
}, false);

xhr.addEventListener("readystatechange", function() {
  var result = xhr;
  if (result.status != 200) { //error
    console.log('上传失败', result.status, result.statusText, result.response);
  } 
  else if (result.readyState == 4) { //finished
    console.log('上传成功', result);
  }
});
xhr.send(form); //开始上传

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
屏蔽script注入小例子
Nov 12 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
js实现九宫格布局效果
May 28 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
JS实现可视化文件上传
Sep 08 #Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 #Javascript
vue-router的HTML5 History 模式设置
Sep 08 #Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 #Javascript
react 父子组件之间通讯props
Sep 08 #Javascript
js代码规范之Eslint安装与配置详解
Sep 08 #Javascript
vue弹窗插件实战代码
Sep 08 #Javascript
You might like
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
简单解决Python文件中文编码问题
2015/11/22 Python
详解Python中的动态属性和特性
2018/04/07 Python
Django logging配置及使用详解
2019/07/23 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
违反校纪校规检讨书
2014/02/15 职场文书
个人担保书范文
2014/05/20 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
检讨书模板
2015/01/29 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
Spring Boot 实现 WebSocket
2022/04/30 Java/Android