效果图:
前端:
<div class="photos-upload-view">
<div>
<input type="file" id="fileselect" name="imagesFile" multiple="multiple" onchange="showPreview(this)" accept="image/*"/>
</div>
<div id="messages">
<p id="message_for_p">图片信息预览窗口 【注:每张图片不得超过5MB,最多上传三张图片,限 jpg/png/gif/jpeg 格式】
</p>
<div id="previewImg"></div>
</div>
</div>
js部分:
<script type="text/javascript">
function showPreview(obj){
//初始化预览窗口
document.getElementById("previewImg").innerHTML = "";
if(obj.files){
for(var i=0;i<obj.files.length;i++){
var reader=new FileReader(); //创建对象用于文件读取
reader.readAsDataURL(obj.files[i]);//读取的内容是加密以后的本地文件路径
reader.function(evt){ // 数据读取完成时触发onload对应的响应函数
var text = document.getElementById("previewImg").innerHTML;
//evt.target是FileReader等同于reader
document.getElementById("previewImg").innerHTML = text+"<img class='imgPreview' src='"+evt.target.result+"'/>";
}
}
}
}
</script>