Posted in Javascript onOctober 25, 2016
input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了。
具体代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script> </head> <body> <input type="file" multiple id="inputs"/> //multiple(多文件上传) <div id='dd'></div> <script> $(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 += "<img src='"+reader.result+"'>"; }; } </script> </body> <html>
实现上传图片直接预览,避免提交后在读取图片的冗余过程
以上所述是小编给大家介绍的input file上传 图片预览功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
input file上传 图片预览功能实例代码
- Author -
痞子蔡蔡0声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@