input file上传图片预览(查看图片大小，类型，名字)------------------------------自己动手写jQuery插件

最新推荐文章于 2023-06-28 17:41:35 发布
置顶 最新推荐文章于 2023-06-28 17:41:35 发布
阅读量3.9k 收藏
点赞数
分类专栏： web前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/51568611
版权


参考文章：http://blog.csdn.net/libin_1/article/details/50433863

最简单的实现方法：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<title></title>
		<style type="text/css">
			div.imger {
				width: 182px;
				height: 142px;
				border: 1px solid green;
				position: relative;
			}
			
			div.imger input {
				position: absolute;
				opacity: 0;
				display: block;
				width: 100%;
				height: 100%;
				z-index: 10;
			}
			
			div.imger img {
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			
			div.imger span.closer {
				position: absolute;
				top: 10px;
				right: 10px;
				color: red;
				z-index: 10;
				cursor: pointer;
				display: none;
			}
			
			div.imgers {
				float: left;
				margin: 5px 10px 5px;
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
		 	$(function() {
				function getObjectURL(file) {
					var url = null;
					if (window.createObjectURL != undefined) {
						url = window.createObjectURL(file)
					} else if (window.URL != undefined) {
						url = window.URL.createObjectURL(file)
					} else if (window.webkitURL != undefined) {
						url = window.webkitURL.createObjectURL(file)
					}
					return url
				};
				var strs = '<div class="imgers imger">' +
					'<input type="file" />' +
					'<img src="img/btn.png" />' +
					'<span class="closer">X</span>' +
					'</div>';
				$("div.imger").on('change', "input[type='file']", function(e) {
					var srcs = getObjectURL(this.files[0]);
					alert(srcs);
					/**************************/
					console.log("图片大小:" + this.files[0].size / 1024 + "     图片类型:" + this.files[0].type + "    图片名字:" + this.files[0].name + "     图片上次修改时间:" + this.files[0].lastModifiedDate);
					var tuozhanming = (this.files[0].name).split('.');
					console.log("文件拓展名:" + tuozhanming[1]);
					/*************************/
					$(this).next('img').attr('src', srcs).next('span.closer').show();
				});
				$("div.imger").on('click', 'span.closer', function() {
					$("div.imger input[type='file']").val('');
					$(this).hide().prev('img').attr('src', 'img/btn.png');
				});
				//-----------------------------------------------------------------------------//
				$("body").on('change', "div.imgers input[type='file']", function(e) {
					var srcs = getObjectURL(this.files[0]);
					alert(srcs);
					/**************************/
					console.log("图片大小:" + this.files[0].size / 1024 + "     图片类型:" + this.files[0].type + "    图片名字:" + this.files[0].name + "     图片上次修改时间:" + this.files[0].lastModifiedDate);
					/*************************/
					$(this).next('img').attr('src', srcs).next('span.closer').show();
					$(this).parent('div').after(strs);
				});
				$("body").on('click', 'div.imgers span.closer', function() {
					if ($("div.imgers").length > 1) {
						$(this).parent('div.imgers').remove();
					} else {
						$("div.imgers input[type='file']").val('');
						$(this).hide().prev('img').attr('src', 'img/btn.png');
					}
				});
			})
		</script>
		 
	</head>

	<body>
		<div class="imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>
		<div class="imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>
		<div class="imgers imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>

	</body>

</html>

自己动手写jQuery插件 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/imger.js"></script>
		<title></title>
		<style type="text/css">
			div.imger {
				width: 182px;
				height: 142px;
				border: 1px solid green;
				position: relative;
			}
			
			div.imger input {
				position: absolute;
				opacity: 0;
				display: block;
				width: 100%;
				height: 100%;
				z-index: 10;
			}
			
			div.imger img {
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			
			div.imger span.closer {
				position: absolute;
				top: 10px;
				right: 10px;
				color: red;
				z-index: 10;
				cursor: pointer;
				display: none;
			}
			
			div.imgers {
				float: left;
				margin: 5px 10px 5px;
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				$("div.imger").imgers({
					width: '182', //这两个参数没用上
					height: '142',
					autoplus: false
				});
				$("div.imgers").imgers({
					width: '182', //这两个参数没用上
					height: '142',
					autoplus: true
				});
			})
		</script>

	</head>

	<body>
		<div class="imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>
		<div class="imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>
		<div class="imgers imger">
			<input type="file" />
			<img src="img/btn.png" />
			<span class="closer">X</span>
		</div>

	</body>

</html>

imgers.js 
;
(function($) {
	$.fn.imgers = function(options) {
		var local_val = {
			width: '100', //长
			height: '100', //宽
			autoplus: false //自动增加
		};

		function getObjectURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) {
				url = window.createObjectURL(file)
			} else if (window.URL != undefined) {
				url = window.URL.createObjectURL(file)
			} else if (window.webkitURL != undefined) {
				url = window.webkitURL.createObjectURL(file)
			}
			return url
		};
		var strs = '<div class="imgers imger">' +
			'<input type="file" />' +
			'<img src="img/btn.png" />' +
			'<span class="closer">X</span>' +
			'</div>';
		var obj = $.extend({}, local_val, options);
		console.log(obj);
		$("div.imger").on('click', 'span.closer', function() {
			$("div.imger input[type='file']").val('');
			$(this).hide().prev('img').attr('src', 'img/btn.png');
		});
		$("body").on('click', 'div.imgers span.closer', function() {
			if ($("div.imgers").length > 1) {
				$(this).parent('div.imgers').remove();
			} else {
				$("div.imgers input[type='file']").val('');
				$(this).hide().prev('img').attr('src', 'img/btn.png');
			}
		});

		if (obj.autoplus) {
			$("body").on('change', 'div.imgers input', function() {
				var srcs = getObjectURL(this.files[0]);
				alert(srcs);
				/**************************/
				console.log("图片大小:" + this.files[0].size / 1024 + "     图片类型:" + this.files[0].type + "    图片名字:" + this.files[0].name + "     图片上次修改时间:" + this.files[0].lastModifiedDate);
				/*************************/
				$(this).next('img').attr('src', srcs).next('span.closer').show();
				$(this).parent('div').after(strs);
			})
		} else {
			$("body").on('change', 'div.imger input', function() {
				var srcs = getObjectURL(this.files[0]);
				alert(srcs);
				/**************************/
				console.log("图片大小:" + this.files[0].size / 1024 + "     图片类型:" + this.files[0].type + "    图片名字:" + this.files[0].name + "     图片上次修改时间:" + this.files[0].lastModifiedDate);
				var tuozhanming = (this.files[0].name).split('.');
				console.log("文件拓展名:" + tuozhanming[1]);
				/*************************/
				$(this).next('img').attr('src', srcs).next('span.closer').show();
			})
		}

	}
	return this
})(jQuery);



最骚的就是你
关注
专栏目录
input-file的本地图片预览+等比例缩放
08-13
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
input file 预览图片
wang_long_989的专栏
04-30 467
var file = e.target.files[0]; if(file){ var reader = new FileReader(); reader.onload=function(){ $('#showimg').html("+reader.result+"' id='element_id' />"); }; reader.readAsDa
基于JQuery的图片上传预览插件（图片预览、过滤文件类型、限制图片大小、图片显示后回调）
强强强子的博客
12-18 2645
/* *名称:图片上传本地预览插件 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *参数说明: Img:图片ID; * Width:预览宽度; * Height:预览高度; * ImgType:支持文件类型; * maxSize图片大小; * Callbac
html5图片上传插件预览图片尺寸大小上传代码
05-14
html5图片上传插件预览图片尺寸大小上传代码html5图片上传插件预览图片尺寸大小上传代码
input方式上传文件并且本地预览&&图片校验
最新发布
Blue54的博客
06-28 757
图片上传：写在弹窗确认按钮上随便写个按钮触发你的接口就行。参数方式为：x-www-form-urlencoded所以用new FormData()了。input点击方法选择文件：并渲染到的src中。图片校验：file:文件流 || 文件对象。
简单的图片上传--龙哥.zip
04-14
例如，通过检查`files`对象的类型来限制只能上传图片，或者使用`files[0].size`来判断文件大小，如果超过设定值则提示用户。 3. **Ajax异步上传**：图片上传通常采用异步方式进行，以防止阻塞用户界面。可以使用...
上传图片-预览上传MVC (java,css,js,jsp) 代码片段(全)
04-28
在这个案例中，Model负责处理图片的存储和管理，View负责展示图片预览，Controller则协调Model和View的交互。 2. **Java后端处理**： - **文件上传**：Java通过Servlet API或第三方库如Apache Commons FileUpload...
react-reactavatareditor类似Facebook的头像图片编辑器组件
08-15
<input type="file" onChange={this.handleFileChange} /> image={this.state.image} width={200} height={200} border={50} color={[255, 255, 255, 0.6]} // RGBA scale={1} rotate={0} onImageLoaded=...
React-Upload-Component:使用Hooks和Bootstrap Italia风格的React上传组件
03-31
例如，可以使用URL.createObjectURL()方法创建文件的临时URL，用于在界面上预览图片或视频。对于进度条，可以监听fetch或axios的upload进度事件，并更新相应的状态。 总结来说，创建一个“React-Upload-Component”...
react-一个React的图片多剪裁组件
08-15
1. **上传图片**：组件需要支持用户上传本地图片，这通常通过`<input type="file">`元素配合事件处理函数实现。 2. **预览图片**：上传后，用户应该能看到图片的预览，这可以通过设置`<img>`标签的`src`属性为上传...
input file上传图片预览
12-30
input file上传图片预览
jq input简陋版图片上传
系咩的个人收藏博客
12-13 2010
html部分另外补充一点input哪里accept="image/*"会导致打开缓慢accept=”image/*”属性会对每一个文件都遍历一次所有的”image/*”文件类型，当文件较多时，文件的检验时间较长，这可能是Webkit的底层实现的bug&lt;input type="file" style="display: none" name="file0[]" id="file0" mul..
jquery上传图片和文字的图文并茂上传组件的功能实现
zhangzeshan
03-24 2201
2022年开来我一直沉迷于公司的业务开发，更多的是curd的工作还有自己在学习的分布式锁的知识，但是还没整理完毕，心想总得写点什么，不然都要荒废了！！！，刚好最近的项目有一个功能点很有意思：是一个上传图片的同时也要写入文字，这样的设计目的是让另一客户端取出数据的时候渲染是图文并茂的样子，并且不止一组图文，有涉及到多组，所以需要对元素有增加和删除的细节。 效果图 思路 首先是把样式给画出来，接下来上传图片，上传之后将成功的值渲染到页面上，并在隐藏域中放置图片的名称，文本输入这点不需要赘述，填什么提交什么.
boostrap+fileinput上传图片至后台并预览图片
hikktn的博客
10-02 9265
最近写项目，写上传封面图片，而自己写东西呢？css太难看，但是最后还是写了一个简单的增加删除图片，不过这次不介绍自己写的上传图片，今天介绍我对于这个boostrap的上传文件插件，感觉非常不好用！不好用，但是还是可以用。 HTML代码 &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitte...
【前端解决方案】input file 上传图片，并实现实时预览
Yuu
11-12 8089
前言 我最近在做自己个人博客的时候，遇到一个前端的问题，就是如何实时预览 input 标签上传的图片。一般的 &lt;input type="file’ /&gt; 标签是不能实现实时预览的。 解决方案 可以通过 file 标签和 js 的 FileReader 接口来实现。 把选择的图片文件调用 readAsDataURL 方法 把图片数据转成 base64 字符串形式显示在页面上 htm...
input上传图片并预览
热门推荐
PresByter的博客
10-23 9万+
首先说一下input 大家都知道上传文件，图片是通过input 的file进行上传的。 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file">；在页面的样式是不可以更改的，如下图 但是最为一个投机取巧的前端，一切样式都是可以修改的。 效果图如下 代码： <input type="file" n
jquery 实现图片上传，并在前端显示出来
weixin_30615767的博客
07-30 775
目前遇到一个图片上上传的需求，突然发现，原来之前都没有做过此种类型的需求,以下是需求样式： 看到需求后之所以有点懵，是因为我接触到的文件上传，一般都是按钮类型的，例如以下这种： 深呼吸，好好想一下，整理整理思路： 1.需要有一个虚线框，这里为一个div元素 2.再有一个十字框（和文字说明一起，可以集成组合为一张图片），这里可以可以为一个img元素，这样：当没有上传图片时，...
input上传图片并且实现预览
weixin_45757134的博客
06-11 6775
文章目录前言一、确定思路二、书写代码1.HTML部分2.CSS部分3.JS部分（重点）3.1.点击选择图片按钮，调用input文件框事件的的代码3.2.转换格式3.3.发送图片给后端 前言 在网站中，上传图片这个功能，这个还是挺常见的。比如说：在填写信息中，上传头像中。 提示：以下是本篇文章正文内容，下面案例可供参考 一、确定思路 整个功能，大致可以分为三个步骤。 点击选择图片的按钮，从本地选择一张图片。（选图片） 选择好之后，会进行预览。就好比自己微信要换头像，选择好之后，都会有预览的步骤。（预
Bootstrap-fileinput：多图片上传与编辑教程
"Bootstrap-fileinput 是一个用于增强HTML5文件输入控件的jQuery插件，提供了丰富的自定义选项和功能，如多文件上传、图片预览、进度条显示等。在本示例中，我们将讨论如何在Bootstrap环境中实现fileinput的多图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值