码迷,mamicode.com
首页 > 其他好文 > 详细

奔三的日子里4

时间:2018-11-09 21:04:05      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:class   err   文件类型   post   字符   通过   string   指定   文件信息   

ES 7     async/await

 

<!--------------------------------------------------------------->

 

前端文件上传原理

前端网页文件上传一般使用 <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);

---------------------
作者:qq_8572777886
来源:CSDN
原文:https://blog.csdn.net/q857277886/article/details/79092591
版权声明:本文为博主原创文章,转载请附上博文链接!

---------------------
作者:qq_8572777886
来源:CSDN
原文:https://blog.csdn.net/q857277886/article/details/79092591
版权声明:本文为博主原创文章,转载请附上博文链接!

<!--------------------------------------------------------------->

小知识:

el-table,是把 width 换成 min-width ,就支持百分比显示啦 !

vue使用v-for循环组件的时候需要,写:key值,否则会报警告

 

奔三的日子里4

标签:class   err   文件类型   post   字符   通过   string   指定   文件信息   

原文地址:https://www.cnblogs.com/hsmWorld/p/9936711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!