Ajax 之文件上传

tomato 发布于2019-08-26 11:58 / 2775人阅读

摘要：简单的上传例子先在里面准便好标签添加上传文件上传文件解读步骤的对象获取，对象生成使用的事件来获取，文件的内容使用的方法来添加一个新值到里面来使用的的方法来上传文件原理说明对象其实不止是可以用来上传文件，如同其名，可以模拟一系列表单控件的

FormData 简单的上传例子

/*
  先在 html 里面准便好  标签
*/

var fileInput = document.querySelector(".file-input");
var formData = new FormData();

//添加 formData 上传文件
fileInput.onchange = function(e){
  formData.append("fileIn", this.value);
}

//上传文件
var request = new XMLHttpRequest();
request.open("POST", "/ajax.php");
request.send(formData);

解读步骤

fileInput 的 dom 对象获取， FormData 对象生成；

使用 fileInput 的 onchange 事件来获取，文件的内容；

使用 formData 的 append 方法来添加一个新值到 formData 里面来；

使用 XMLHttpRequest 的 send 的方法来上传文件；

原理说明

FormData 对象其实不止是可以用来上传文件，如同其名，可以模拟一系列表单控件的键值对，然后用于 XMLHttpRequest 的提交，其最大的优点就是可以异步上传一个二进制文件；

FormData 是无法读取文件的，其核心就是通过 append()，将文件变成新增字段，来上传文件；

FileReader 简单的读取文件例子

/*
  先在 html 里面准便好  标签
*/

var fileInput = document.querySelector(".file-input");
// 创建 FileReader 对象
var fileReader = new FileReader();

fileInput.onchange = function(e){
  // 获取原声 File 对象
  var file = event.target.files[0];
  // 以二进制读取文件对象
  fileReader.readAsArrayBuffer(file);
  //fileReader.readAsDataURL(file); // 以data:URL 格式的字符串以表示读取文件的内容
  //fileReader.readAsText(file); //以字符串形式表示读取到的文件内容
}

// 读取操作完成后
fileReader.onload = function (e) {
  console.log(e)
}

解读步骤

创建 FileReader 对象；

通过 fileInput 的 dom 对象 onchange 的方法，获取原始 File 对象；

通过 FileReader 中其中一种读取方式，读取原始 File 对象；

通过 FileReader 的 onload 方法获取来继续读取完成后的操作；

原理说明

一般来说，读取文件应用场景应该是需要作断点续存的时候，或者想要预览上传的图片；

预览图片例子

var fileInput = document.querySelector(".file-input");
var imgSrc = document.querySelector(".img")
// 创建 FileReader 对象
var fileReader = new FileReader();

fileInput.onchange = function(e){
  // 获取原声 File 对象
  var file = event.target.files[0];

  fileReader.readAsDataURL(file); // 以data:URL 格式的字符串以表示读取文件的内容
}

// 读取操作完成后
fileReader.onload = function (e) {
  console.log(e)
  imgSrc.src = e.target.result
}

由于本人使用 FileReader 得并不多，所以这里不作详细讨论了，有兴趣的同学可以，直接去看MDN文档

总结

虽然上传文件很早就尝试过了，但是当时理解并不是很深入，而且加上最近几次在这方面知识的打击，有点不太能认了；

感谢白白的几次指导，（指导了好几次，本人还是忘了)

感谢 MDN 提供的文档给予我一定的灵感

FormData 对象的使用

FileReader

感谢阅读，欢迎指出文章的不足之处，以及讨论更多的代码优化

原文站点 时之物语
原文链接 Ajax 之文件上传

专线服务 idc机房托管 ajax上传文件 ajax文件上传 ajax实现文件上传 Ajax文件上传库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107928.html

H5特性之FormData不刷新文件上传

摘要：杂言之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种库，附带多图上传，预览，甚至是图片处理等特技。但是是个好东西，他提供了，可以帮助我们拼凑参数，乃至文件资源。测试上传可以看到请求到了看下，就可以看到返回的相关信息了。杂言之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种JS库，附带多图上传，预览，甚至是图片处理等特技。那么如果不接触第三方的库，可不可以...

vincent_xyb 2019-08-21 10:34 评论0 收藏0
WEB之常见工作问题总结（1-20）

摘要：第三种，使用格式，即在中请求参数处理跨域问题当然请求方式只能是。最后发现有网友说版本不稳定引起的，于是把百度地图回退到了，结果还真是可以了。请问在移动端页面中播放优酷里面的视频，怎样实现 1.web扫码登录怎么实现，思路步骤 WEB平台手机第1步生成二维码第2步（ajax监控后台）扫码第3步 ...

genedna 2019-08-22 13:40 评论0 收藏0
php图片处理之本地图片转base64格式上传

摘要：文章首发于蓝锅锅博客主要是用到的接口，既然是的，所支持的浏览器我就不多说啦，老生常谈的问题了，远离，珍惜生命。目录路径为目录路径为文章首发于蓝锅锅博客，欢迎交流，共同进步。我们在开发系统时，处理图片上传是不可避免的，例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上传方式，今天我们来讲一个使用html5 base64上传图片的方法。文章首发于蓝...

levy9527 2019-06-27 14:44 评论0 收藏0