输入文件上传图片预览其实很简单。今天边肖就通过这篇文章给大家介绍一下输入文件上传预览功能的实现代码，比较简单。对输入文件的上传预览功能感兴趣的朋友可以参考一下。

input file上传一张图片预览其实很简单，但是很神奇的是我以前没有做过。今天，我要摘下她神秘的面纱。其实原理真的很简单。我们都是通过下面一个代码来理解的。

具体代码如下：

！文档类型html

超文本标记语言

头

meta charset='utf-8' /

标题/标题

script src='jquery.js'/script

/头

身体

输入类型=' file ' multiple ID=' inputs '//multiple(多文件上传)

div id='dd'/div

脚本

$(文档)。ready(function () {

$('#inputs ')。change(function () {

var fil=this.files

for(var I=0；i fil.lengthi ) {

reads(fil[I])；

}

});

});

函数读取(fil){

var reader=new FileReader()；

reader . readasdataurl(fil)；

reader.onload=function()

{

document.getElementById('dd ')。innerHTML=' img src=' ' reader . result ' ' '；

};

}

/脚本

/body

超文本标记语言

实现上传图片直接预览，避免提交后看图片的冗余过程。

以上是边肖介绍的输入文件上传图片预览功能的示例代码。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。