原生JS实现前端本地文件上传
2018-09-08 14:55
3363 查看
本文实例为大家分享了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); //开始上传
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- JS实现可视化文件上传
- js实现文件上传功能 后台使用MultipartFile
- 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文件上传插件
相关文章推荐
- 【前端七牛组件】使用js 实现七牛云的上传文件操作
- JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
- 原生JS和jQuery版实现文件上传功能
- 原生JS和jQuery版实现文件上传功能
- 原生JS实现ajax上传文件并显示进度条
- struts2实现文件上传进度条(前端JS+Java)(收藏)
- 原生js FileReader对象实现图片上传本地预览效果
- 原生JS和jQuery版实现文件上传功能
- 原生JS和jQuery版实现文件上传功能
- node.js系列(实例):原生node.js+formidable模块实现简单的文件上传
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
- struts2实现文件上传进度条(前端JS+Java)(自我整理)
- JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
- js实现文件上传,图片本地预览(部分代码是借鉴的)
- 几种js实现的动态多文件上传
- JS实现图片上传本地预览
- 几种JS实现的动态多文件上传
- JS简单实现文件上传(无需插件)
- 纯js实现跨域上传文件
- Asp.net + js 异步上传文件的例子 - 使用iframe实现