您的位置：首页 > 其它

怎么样在input标签选择是直接显示本地图片

2016-06-25 17:44 351 查看

第一步创建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>

第二步我们创建一个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);

第三步这里是全部的html

<html>

<meta charset="utf-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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航