jquery 本地展示选择的图片
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);
2:调用
//图片显示插件 $.imageFileVisible({ wrapSelector: "#image-wrap",//展示图片的位置id fileSelector: "#file",//文本框的id width: 100, height: 50 });
3:html
<input type="file" /> <div ></div>
- 上一篇 »在html文件里使用JQuery上传图片
- 下一篇 »JavaScript 实现图片等比缩放