input type=file 实现上传、预览、删除等功能

不知何时，突然对上传文件按钮起了浓厚的兴趣，当然这源于工作的需要。当时为了顺利上线，索性直接引用了jQuery的一个上传组件，简单粗暴。
后来闲下来，就对这个进行了一番研究，然后做了一个简单的Demo。

友情提醒：不要上传过大的文件，不然换谁都受不了，目前不支持坑爹的低版本IE

戳我看看

虽然有点丑，但是基本功能实现了就好

其实要实现这个功能挺简单的，因为有现成的API可以参考，不会了还可以去搜一下别人做的，接下来我就说一下我对这个的研究和理解，如有错误，欢迎指正！

美化input type=file

当然原生的input可不是长的这个样子，这里我们其实是把input的透明度设置为0，然后用span标签来显示上传文件字样，然后把它们重叠到一块就行了。

file对象

File对象

这里我们获取到这个File对象之后就可以获取到上传文件的一些属性，比如：lastModified（代表文件的修改日期，而非上传日期）、name、size（单位是b）、type（例如图片就是"image/png"，然后我们可以根据image来判断是否是图片）等。

    var file = e.target.files[0];//获取File对象，这里是上传单张图片，[0]代表第一张图片。如果多张，就是一个var file = e.target.files;
    var type = file.type.split('/')[0];//按照惯例，不应该由前端判断格式，因为这里是根据后缀名判断的，修改后缀名仍旧可以上传，理应由后端根据文件格式来判断。
    if (type !='image') {
        alert('请上传图片');
        return;
    }
    var size = Math.round(file.size / 1024 / 1024);
    if (size > 3) {
        alert('图片大小不得超过3M');
        return;
    };

fileReader对象

接着讲FileReader对象，这个比较复杂，可以考虑看下。

mozilla开发者文档介绍，英文，勉强可以看一下。

不过归纳起来，我们依旧只需掌握几个重要的点，

readAsDataURL() 方法。//将文件读取为base64的格式，也就是可以当成图片的src
result 属性 //将读取的数据保存在result里。
progress 事件 //定时触发，来获取当前已上传文件的大小，如进度条
loade 事件 //文件上传完成时触发
loadend 事件 //文件上传完成时（不管成功、失败）触发

其他的诸如：readAsBinaryString()方法，loadstart事件等，知道是什么意思就行了。可以参考（由于是三年前写的，有些不全，还是要以官方文档为准）。前人栽的树

    var reader = new FileReader(); //新建FileReader对象
    reader.readAsDataURL(file); //读取为base64
    //以下代码可以删除
    reader.onloadstart = function(){
        console.log('start');  //开始读取
    };
    reader.onprogress = function(e){
        //这个是定时触发的事件，文件较大的时候较明显
        var p = '已完成：' + Math.round(e.loaded / e.total * 100) + '%' ;
        $(".file_upload").find(".progress").html(p);
        console.log('uploading');  //文件较大，就会出现多个uploading
    };
    reader.onabort = function(){
        console.log('abort'); //用作取消上传功能
    };
    reader.onerror = function(){
        console.log('error'); //文件读取出错的时候触发，暂模拟不出
    };
    reader.onload = function(){
        console.log('load complete'); //完成
    };
    //预览代码，没在onload里面写的原因是我不想
    reader.onloadend = function (e) {
        var dataURL = reader.result，
            image = '<img src="'+dataURL+'"/>'， //预览图片
            text = '<span>"'+dataURL+'"</span>'; //测试预览text
        var name = file.name,size = Math.round(file.size / 1024);

        var div = '<p>Name: '+name+'</p><p>Size: '+size+'kb</p>';
        var imglist = '<div class="img_box"><span class="delete">X</span>'+image + div+'</div>';
     $(".img_holder").html(imglist);      
    };

如果一切还算顺利，那就要注意一下，删除预览图片可能存在某些问题，删除不仅仅要删除页面上展示的图片，input里面的图片也要清空，不然就会出问题。

PS：上传多张图片，原理差不多，不过需要注意几点：

设置multiple来实现多张上传功能。
需要使用循环来获取上传的每一张图片，并把他们依次展示出来
每次循环都需要重新new一个新的FileReader对象。

input type=file 实现上传、预览、删除等功能

美化input type=file

file对象

fileReader对象

猜你喜欢