猿问

input file 多张图片上传预览

<input type="file" multiple />
实现多张图片上传前的本地预览
这个有插件嘛？或是怎样的方法思路？

ABOUTYOU
浏览 1748回答 1
1回答

慕村9548890

<!DOCTYPE html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>多图预览</title></head><script>&nbsp;&nbsp;var result=document.getElementById("result");&nbsp;&nbsp;var file=document.getElementById("file");&nbsp;&nbsp;&nbsp;&nbsp;function readAsDataURL(){&nbsp;&nbsp;&nbsp; &nbsp; var file = document.getElementById("file").files;&nbsp; &nbsp; var result=document.getElementById("result");&nbsp;&nbsp;&nbsp; &nbsp; for(i = 0; i< file.length; i ++) {&nbsp; &nbsp; &nbsp; &nbsp; var reader&nbsp; &nbsp; = new FileReader();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(file[i]);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; reader.onload=function(e){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //多图预览&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result.innerHTML = result.innerHTML + '<img src="' + this.result +'" alt="" />';&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</script>&nbsp;&nbsp;<p>&nbsp;&nbsp;&nbsp; &nbsp; <label>请选择一个文件：</label>&nbsp;&nbsp;&nbsp; &nbsp; <input type="file" id="file" multiple="multiple" />&nbsp;&nbsp;&nbsp; &nbsp; <input type="button" value="读取图像" onclick="readAsDataURL()" />&nbsp; &nbsp;</p>&nbsp;&nbsp;<div id="result" name="result"></div>&nbsp;&nbsp;
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答