抄自
http://blog.csdn.net/qiulei_21/article/details/52785191
第一种方法比较好
版权声明:本文为博主原创文章,未经博主允许不得转载。 根据项目需要,需要选择本地图片并显示在页面上,然后上传至服务器。因为自身刚刚接触js,所以比较生疏,碰到问题吼,幸好有强大的网络,搜索很多有用的资源,现在将js读取本地图片并显示的代码总结一下,供大家使用,并给自己一个记录。 第一种方法: <script type="text/JavaScript"> //图片显示插件 (function ($) { $.imageFileVisible = function (options) { // 默认选项 var defaults = { //包裹图片的元素 wrapSelector: null, //<input type=file />元素 fileSelector: null, '100%', height: 'auto', errorMessage: "不是图片" }; // Extend our default options with those provided. var opts = $.extend(defaults, options); $(opts.fileSelector).on("change", function () { var file = this.files[0]; var imageType = /image.*/; if (file.type.match(imageType)) { var reader = new FileReader(); reader.onload = function () { var img = new Image(); img.src = reader.result; $(img).width(opts.width); $(img).height(opts.height); $(opts.wrapSelector).append(img); }; reader.readAsDataURL(file); } else { alert(opts.errorMessage); } }); }; })(jQuery); $(document).ready(function () { //图片显示插件 $.imageFileVisible({ wrapSelector: "#image-wrap1", fileSelector: "#file1", 300, height: 300 }); $.imageFileVisible({ wrapSelector: "#image-wrap2", fileSelector: "#file2", 300, height: 300 }); }); </script> <div id="ImportHead"> <table border="0" class="frm" style="height: 35px; auto; padding-left: 5px; padding-top: 1px;"> <tr style=" 300px; height: 400px;"> <th> 选择图1: </th> <td> <input type="file" id="file1"> <div id="image-wrap1" style=" 300px; height: 300px; border: solid 1px lightGray"> </div> </td> <th> 选择图2: </th> <td style=" 300px;"> <input type="file" id="file2"> <div id="image-wrap2" style=" 300px; height: 300px; border: solid 1px lightGray"> </div> </td> </tr> <tr> <td colspan="2" style="text-align: right"> <input type="submit" id="btnUpload" class="btnSearch" value="上传" /> </td> </tr> </table> </div> 第二种方法: <html> <body> <img id="image"src=""/> <br/> <input type="file"onchange="selectImage(this);"/> <br/> <script> var image = ''; function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('image').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } </script> </body> </html>