html file 上传图片预览,input file上传 图片预览功能实例代码

input file上传图片预览其实很简单，只是没做过的感觉很神奇，今天我就扒下她神秘的面纱，其实原理真的很简单，下面通过一段代码大家都明白了。

具体代码如下所示：

//multiple(多文件上传)

$(document).ready(function () {

$("#inputs").change(function () {

var fil = this.files;

for (var i = 0; i < fil.length; i++) {

reads(fil[i]);

}

});

});

function reads(fil){

var reader = new FileReader();

reader.readAsDataURL(fil);

reader.onload = function()

{

document.getElementById("dd").innerHTML += "";

};

}

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

以上所述是小编给大家介绍的input file上传 图片预览功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！