原生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 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
JS高级笔记
Jul 13 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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
?繁体转换的class
2006/10/09 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
再谈JavaScript线程
2015/07/10 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
详解vue-cli 脚手架 安装
2019/04/16 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
函授教育个人学习的自我评价
2013/12/31 职场文书
会计专业导师推荐信
2014/03/08 职场文书
房产代理公证处委托书
2014/04/04 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS