1.文件如何上传
a.把图片转化为base64位上传到服务器(使用getBase64Image()方法把图片转化为base64位格式)
b.使用input标签进行上传(那么如何上传呢,客官请继续往下看)
2.怎么写
<input id="images" name="file" type="file" multiple accept="image/gif,image/jpeg,image/jpg,image/png" />
看完代码之后会问,multiple 与accept属性是干嘛的呢,其实accept属性是规定上传数据类型的,上传数据类型/数据格式,multiple 是规定用户是否可以选择多个文件进行上传.
知道了上传文件的标签了,那到底应该怎么传呢?看官别急,且听我细细道来
3.怎么传
第一步:获取input的files属性
第二步:创建FormData对象,吧file添加到FormData对象中
第三步:通过ajax上传FormData对象
4.拓展
正常的开发需求,我们一般要对文件的大小进行限制,显示图片的名字,上传图片要加一些预览等功能,此时我们就要知道File对象与FileReader了
a.File对象
File对象提供了name,type,size方法包括了上传文件的名字,类型与大小
b.FileReader读取文件内容
具体方法如下
var file = document.getElementById('file').files[0];//获取file对象
if (file) {
var reader = new FileReader();//创建FileReader对象
reader.onload = function (event) {
var txt = event.target.result;//上传图片的url
var img = document.createElement("img");
img.src = txt;
document.getElementById("result").appendChild(img);
};
}
reader.readAsDataURL(file);//将读取到的文件编码成Data URL
5.遇到的坑
当我们把accpet设置为accpet="image/"时,Chrome总会出现卡段问题,当我把accpet="image/改为accpet="image/jpg时,就不会有卡顿问题啦,通过百度发现,是谷歌的SafeBrowsing对文件进行了检查.具体原因就是,当我们对SafeBrowsing白名单之外的文件格式进行上传时,SafeBrowsing会对文件进行检查,此时就出现上传任务被挂起(js单线程嘛,不理解的可以看看js的事件循环),此过程会持续到SafeBrowsing任务结束或者超时,此时文件进行上传.
解决办法:升级浏览器或者对文件类型进行细化.
