最近折腾HTML5批量上传图片(文件)的一些唠叨

在公司的项目中,需要我把之前的单个ajax传图修改成多图上传。如果是很忙的情况下,我肯定就会去网上拉一个完事儿。

但正好有兴趣了解一下关于H5的多文件上传和图片预览的功能,所以开始折腾H5多图片上传。

upload-files

html方面,其实并不需设置什么特殊属性,给input加一个multiple就行了

<input type="file" name="file" accept="image/*" multiple>

批量上传主要关键在于使用H5新API,例如files,FileReader之类的API。

一般来说,多图上传嘛,肯定是需要预览每一张图片的,所以如何在页面上预览图片是很重要的问题。

参考MDN的时候,看了一个例子,可以大概总结为:(原文

1、监听input的change事件,在事件中,获取到选择的File对象;

2、利用FileReader接口的readAsDataURL()读取File对象的内容;

3、监听对应的onload事件中,把获取到的base64值,用一个img标签来显示。

基本上,步骤可以理解这样的三步。

一个简单粗暴的例子(为了方便操作DOM,我用的jQuery)

var _imgReader = new FileReader();
_imgReader.readAsDataURL(_file); // 这个_file就是file对象,input[type="file"]中的files
_imgReader.onload = function(e) {
    var $_img = $('<img/>');
    $_img
    .attr('src',e.target.result)
    .appendTo($('body'));
}

好了,显示没问题了,如果要做更加友好,自己折腾了。


显示没问题,现在要处理异步上传图片。我找了很多的例子,发现都是用base64直接post上传的。so,直接用Ajax发送post请求就行了。

对于多文件的上传,就是创建多个Ajax请求,每个文件对应一个请求,这样就能正常监听到每个文件的上传状态。

当然在后台,base64的文件不能再像默认的上传那样处理了。不过,这一类的处理demo都比较的多,所以网上搜一搜就能找到了。

我这边只负责前端部分,所以就贴一个ajax的代码吧。

$.ajax({
    type: "post",
    url: "/uploads",
    data: 'files=' + encodeURIComponent(_imgData),
    dataType: "json",
    success: function(data) {
        if (data.code == '1') {
            alert("上传成功");
        } else {
            alert("上传成功");
        }
    },
    error: function(e) {
        // 这个没细说的必要了,了解到e.status == 413是文件过大被服务器拒绝就行了
    }
})

有一点,为了传送的稳定,我用encodeURI编译了一下base64。


好了,一个多文件的上传就大概分析出来了,对于细节的优化,就需要单独去做了。

不过,我还是有一些问题没解决,比如,文件的上传进度条、浏览器不支持IE10以下的问题。

如果有更好的方案,我会更新出来。或者,你有更好的方案,就在留言区告诉我吧。

【实际上,如果只考虑H5,我们也有原生态的提交方法,具体细节等我后面更新文章吧】

阅读: 2240
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/73

相关阅读

通知

暂时关闭留言功能,正在开发相关插件。
后期不再更新mylog主题,对应补偿计划中。

精品域名

出售精品域名 Yumi.La 价格面议