input实现多文件上传及图片预览
通过使用html的input标签可以实现文件上传比如
<input id="file" type="file" name="upload" multiple onchange="showch();">
其中将type属性设为file。
添加multiple实现多文件上传入下图所示:
通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性
获得文件属性的js代码如下:
<script type="text/javascript"> function showch(){ var files=document.getElementById('file').files,//其中document.getElementById("file").files 会获取一个数组,数组中的元素拥有的属性有lastModifiedDate,name,size,type,webkitRelativePath。 show=document.getElementById('show'); for (var i = 0; i < files.length; i++) { show.innerHTML+=files[i].name+"<br>"; } } } </script>
现在实现图片预览;
出于安全考虑浏览器一般不能直接获得文件的绝对路径;
因此就要用到FileReader用于从文件中读取数据和保存到JS变量中。此API特意设计成跟XMLHttpRequest
一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。
主要有如下几种读取文件的方式:
readAsText()
– 返回文件内容的纯文本格式readAsBinaryString()
–返回文件内容的二进制格式 (不推荐– 推荐使用readAsArrayBuffer()
)readAsArrayBuffer()
– 返回文件内容的ArrayBuffer
格式(图片文件推荐使用)readAsDataURL()
– 返回文件内容的 data URL格式
现在需要预览图片,所以使用readAsDataURL()返回文件内容的data URL格式
由于data URL包含图片的所有内容,所以可以直接赋给img 的src属性
代码如下:
1 var reader=new FileReader(); 2 reader.readAsDataURL(files[i]); 3 reader.onload=function(e){ 4 var img=new Image(); 5 img.src=this.result; 6 show.appendChild(img);
最终效果:
至此所有功能都实现
最终代码如下:
1 <input id="file" type="file" name="upload" multiple onchange="showch();"><!--这个选中多个的方式让人觉得有点不爽啊=-= 不是很好用的样子捏--> 2 <div id="show"></div> 3 </form> 4 <script type="text/javascript"> 5 function showch(){ 6 var files=document.getElementById('file').files,//其中document.getElementById("file").files 会获取一个数组,数组中的元素拥有的属性有lastModifiedDate,name,size,type,webkitRelativePath。 7 show=document.getElementById('show'); 8 for (var i = 0; i < files.length; i++) { 9 show.innerHTML+=files[i].name+"<br>"; 10 var reader=new FileReader(); 11 reader.readAsDataURL(files[i]); 12 reader.onload=function(e){ 13 var img=new Image(); 14 img.src=this.result; 15 show.appendChild(img); 16 console.log(this.result); 17 } 18 } 19 20 } 21 </script>