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>'; //测试预览textvar 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 实现上传、预览、删除等功能相关推荐

imgareaselect + php 裁剪和上传,jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能
本文主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下,希望能帮助到大家. 上一节随笔中,我们已经知道了关于jQuery插件ImgAreaS ...
input type=file图片上传时，先预览
<label><input type="file" id="upload"> </label> js $("#up ...
html input type=file 文件上传; 图片上传; 图片闪烁
(1)input file 对话框和获取选中文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
input[type=file] 异步上传文件
背景 UI如图所示,其中有一个拍照图标,点击后要选择拍照或者从相册中选择要上传的图片. 拍照上传部分的代码如下 html部分 <div class="take-photo"& ...
监听input type=file 文件上传取消事件
在做项目的时候,需要根据是否上传图片,(前提是已经上传文件,再次上传取消时,监听取消事件)进而判断页面变化.通过查阅相关资料,发现chane事件并不能监听取消,于是从另外一种角度:判断上传的文件是否有 ...
Android webview Input type=file 文件上传解决方法
默认的情况下在HTML中写 <input type=file /> 的时候回弹出选择文件的窗口,但实际上在webview中默认的是不弹出窗口的解决方法在WebChromeClient ...
html ＜input type=file＞上传文件时，accept属性值汇总，支持文件格式，限制文件格式，限制上传图片的格式
限制文件格式一.示例标签1: <input type="file" accept="image/*" /> accept属性说明: image表 ...
解决利用＜input type=“file“＞上传文件时，value拿到的是fakePath问题
问题:上传文件之后,直接获取input.value是fakePath路径,因此不能通过此路径访问到文件解决方案: 若不想修改系统配置,可利用js代码解决 oInputFile.onchange = ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...

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

美化input type=file

file对象

fileReader对象

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

最新文章

热门文章