文件上传问题

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任务结束或者超时,此时文件进行上传.
解决办法:升级浏览器或者对文件类型进行细化.