input file利用FileReader实现图片上传代码实例
分类:实例代码
FileReader是HTML5新增,下面就是利用它实现图片上传的简单代码。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <style type="text/css"> .ImgBox img{ width:100px; height:100px; margin-bottom:10px; } </style> <body> <div id="ImgBox" class="ImgBox"></div> <input type="file" id="antzone"> </body> <script type="text/javascript"> var fileBox = document.getElementById("antzone"); var ImgBox = document.getElementById("ImgBox"); fileBox.addEventListener("change",function(){ var files_array = this.files; if(files_array[0].type.match(/image/)){ read_image_file(files_array[0]); } },false); function read_image_file(file){ var reader = new FileReader(); reader.onload = function(e){ var image_contents = e.target.result; var img = document.createElement("img"); img.src = image_contents; ImgBox.innerHTML=""; ImgBox.appendChild(img); }; reader.readAsDataURL(file); } </script> </html>
input file利用FileReader实现图片上传代码实例,这样的场景在实际项目中还是用的比较多的,关于input file利用FileReader实现图片上传代码实例就介绍到这了。
input file利用FileReader实现图片上传代码实例属于前端实例代码,有关更多实例代码大家可以查看。