jQuery 图片上传预览

原创 2018年04月16日 17:10:28

此代码用于上传图片并实时预览,代码简洁有效。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5上传单个图片预览</title>
</head>
<body>
	<h3>请选择图片文件:JPG/GIF/PNG</h3>
	<form name="form0" id="form0" >
	<input type="file" name="file0" id="file0"/><br>
	<img src="" id="img0" width="200px" height="auto">
	</form>

	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script> 
		$("#file0").change(function(){
			var objUrl = getObjectURL(this.files[0]) ;
			if (objUrl) {
				$("#img0").attr("src", objUrl) ;
			}
		}) ;
		//建立一个可存取到file的url
		function getObjectURL(file) {
			var url = null; 
			if (window.createObjectURL!=undefined) { // basic
				url = window.createObjectURL(file);
			} else if (window.URL!=undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file);
			} else if (window.webkitURL!=undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		}
	</script>
</body>
</html>

效果截图如下:


地面凹陷

   2D 游戏中有许多技巧来获得比较好的视觉效果, 使游戏更加吸引人. 最常见的是使用 Alpha 通道来做光影, 好象被人用烂了 ;-) 我们需要来点新奇的东西?   留意 Starcraft, ...
  • ghj1976
  • ghj1976
  • 2000-12-08 11:41:00
  • 1297

html5以及jQuery实现本地图片上传前的预览

html5与jQuery实现预览本地图片
  • YQXLLWY
  • YQXLLWY
  • 2016-09-08 13:33:34
  • 9853

可预览移除图片的jQuery多张图片批量上传插件代码

  • 2017年11月20日 18:26
  • 115KB
  • 下载

jquery 本地上传图片预览Demo

  • 2010年08月04日 00:56
  • 46KB
  • 下载

jQuery+HTML5实现图片上传前预览效果

本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标...
  • stwuyiyu
  • stwuyiyu
  • 2016-12-30 10:13:25
  • 483

jquery图片上传预览插件uploadView

html
  • qq_24767091
  • qq_24767091
  • 2017-05-04 14:25:26
  • 528

jquery图片上传预览插件

  • 2013年07月12日 16:28
  • 4KB
  • 下载

原生js、jquery实现多张图片上传、预览、删除

1、Duang!Duang!Duang!上图、看最终效果(注:鼠标以上图片显示“删除”按钮) 2、贴上我的css代码,方便小伙伴们看到效果!  .img-cont{         width:1...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016-11-17 11:54:09
  • 14696

JQUERY 图片上传预览插件

jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(this); opts = jQu...
  • aiqq527
  • aiqq527
  • 2014-04-02 22:24:40
  • 842

jquery实现上传图片本地预览效果

$('#upload').change(fu
  • tengxing007
  • tengxing007
  • 2017-03-21 22:24:18
  • 821
收藏助手
不良信息举报
您举报文章:jQuery 图片上传预览
举报原因:
原因补充:

(最多只允许输入30个字)