前端文件上传原理

记：最近在做图片上传，但是一直对图片上传的概念模糊不清，所以查阅了一些文档，现在对基本原理有了一个认识

前端网页文件上传一般使用 <input type="file" />来实现。

在 HTML 文档中 <input type="file" />标签每出现一次，一个 FileUpload 对象就会被创建。
该标签包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件,该标签的 value属性保存了用户指定的文件的名称。
多选：标签可以通过添加 multiple 属性来支持多选；如果选择了多个文件, 这个值表示第一个被选择的文件路径. JavaScript 可以通过 Input 的 FileList 属性获取到其他的文件路径.
文件信息：可以通过 input.files 属性返回 — 返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表，列表包含图片的name，type，size等属性。
限制文件类型：你可以使用 input 的 accept 属性，accept 属性接受一个逗号分隔的 MIME 类型字符串。如: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — PNG/JPEG
选择文件会触发input的onchange事件;
上传：上传文件前使用FileReader对象读取指定file的文件，并将文件转换为二进制字符串, 并将xhr对象, overrideMimeType 属性设置为text/plain; charset=x-user-defined-binary, 最终后台接收到二进制后再做具体处理。

var reader = new FileRender();
xhr.open(“POST”, url);
xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary’);
reader.onload = function(evt) {
xhr.send(evt.target.result);
};
reader.readAsBinaryString(file);

更详细的 MDN-input file，MDN-Using files

记：最近在做图片上传，但是一直对图片上传的概念模糊不清，所以查阅了一些文档，现在对基本原理有了一个认识

更多相关文章

随机推荐