1、第一步创建html，我们在页面中引入jquery库放置一个文件选择的<input type="file" id="file">和一个显示结果的div#image-wrap。<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><input type="file" id="file"><div id="image-wrap"></div>
2、第二步我们创建一个jquery插件image-file-visible.js方便我们以后使用//图片显示插件(function($) { $.imageFileVisible = function(options) { // 默认选项 var defaults = { //包裹图片的元素 wrapSelector: null, //<input type=file />元素 fileSelector: null , width : '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);
3、第三步这里是全部的html<html><meta charset="ut酆璁冻嘌f-8"><title>input标签选择file直接读取本地图片并显示</title><body><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="image-file-visible.js"></script><script>$(document).ready(function(){ //图片显示插件 $.imageFileVisible({wrapSelector: "#image-wrap", fileSelector: "#file", width: 100, height: 50 });});</script><input type="file" id="file"><div id="image-wrap"></div></body> </html>