html5 上传图片插件-后端H5实现多图上传及预览

bendan520 html5

2023-09-01 0 6,763 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

多文件上传和预览

通过input的type='file"可以上传文件，但只支持单个文件。只有在input中添加multiple属性才能同时上传多个文件。

好吧，我们来实现一个上传和预览多张图片的简单示例。

<div class="input-file-box">
	<span>点击上传图片</span>
	<input type="file" name="" id="uploadfile" multiple>
</div>
<div id="img-box"></div>

这是html结构。 di=img-box 包的前面有预览图像。

下面是js代码：

window.onload=function(){
	var input=document.getElementById("uploadfile");
	var div;
	// 当用户上传时触发事件
	input.onchange=function(){
		readFile(this);
	}
	//处理图片并添加都dom中的函数
	var readFile=function(obj){
		// 获取input里面的文件组
		var fileList=obj.files;
		//对文件组进行遍历，可以到控制台打印出fileList去看看
		for(var i=0;i<fileList.length;i++){
			var reader= new FileReader();
			reader.readAsDataURL(fileList[i]);
			 // 当文件读取成功时执行的函数
			reader.onload=function(e){
				div=document.createElement('div');
				div.innerHTML='+this.result+'" />';
				document.getElementById("img-box").appendChild(div);
			}
		}
	}
}

拿出来分析一下实现步骤，具体看readFile()函数

首先我们获取用户上传的文件

// 获取input里面的文件组
		var fileList=obj.files;

obj.files 返回一个 FileList 对象，该对象具有许多属性。比如我上传了两张图片，控制台拷贝如下console.log(fileList);

可以看到有两个File，下标分别为0和1，宽度长度为2。点击其中一个File展开可以查看更详细的信息

（通过size属性可以控制上传文件的大小，type可以控制上传的类型，FileList的长度可以控制上传的数量）

然后我们遍历文件，进入for循环，首先实例化一个FileReader套接字

var reader= new FileReader();

FileReader接口提供了读取文件的方法和方法

主要方法有：

主要干扰有：

然后以DataURl格式读取当前图片

reader.readAsDataURL(fileList[i]);

文件读取成功后进入.onload()风暴

reader.onload=function(e){
		div=document.createElement('div');
		div.innerHTML='+this.result+'" />';
		document.getElementById("img-box").appendChild(div);
}

首先创建一个div和img，然后渲染到我们预留的bag中html5 上传图片插件，加载到页面中显示图片。

这里this.result获取文件读取的结果，也可以使用e.target.result。将结果放入img的src中。（注意这些冒号）

此时，可以看到上传的图片已经渲染到页面中了。

改变风格

多文件上传预览完成，但是原生文件上传的样式不太好看。如何改变风格？基本方法是：在input内部放一个div，然后将input的宽度和高度设置为100%，并将透明度更改为0，然后直接更改外部div的样式。

举个栗子，最终风格疗效图

或者里面的html结构

<div class="input-file-box">
	<span>点击上传图片</span>
	<input type="file" name="" id="uploadfile" multiple>
</div>
<div id="img-box"></div>

CSS：

/*外层div*/
.input-file-box{
	border: 1px solid gray;
    width: 150px;
    height: 150px;
    position: relative;
    text-align: center;
    border-radius: 8px;
}
/*文字描述*/
.input-file-box > span{
	display: block;
    width: 100px;
    height: 30px;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: gray;
}
/*input框*/
.input-file-box #uploadfile{
	opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}