input实现多文件上传及图片预览

Posted 水流目

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于input实现多文件上传及图片预览的主要内容,如果未能解决你的问题,请参考以下文章

图片选择,预览及上传

input[type='file']样式美化及实现图片预览

移动端h5实现拍照上传图片并预览

9行代码实现图片上传和预览(自定义按钮上传)

9行代码实现图片上传和预览(自定义按钮上传)

html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题