jQuery 多图片上传前的预览

最新推荐文章于 2024-04-09 00:57:47 发布

置顶 xing觀

最新推荐文章于 2024-04-09 00:57:47 发布

阅读量418

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/qq_22849019/article/details/107128570

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

基于jQuery 多图片上传前的预览，好东西赶紧记录下来，嘻嘻；
废话不多说，先看效果：
效果图
代码也很简单，由于引用了在线资源库，可以直接拷贝运行。

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3>请选择图片文件：</h3>
<!-- 这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传，是 html5 的新属性-->
<form id="uploadForm" style="margin-top: 20px;" method="post"
	enctype="multipart/form-data">
	<div class="form-group">
		<label for="name">图片上传</label>
		<input type="file" name="file" id="file" multiple="multiple"
			class="form-control">
		<br>
		<img src="" id="img" style="display: none">
	</div>
</form>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script> 
		//生成类似于UUID的随机数
		function _getRandomString(len) {
		    len = len || 32;
		    var $chars = 'ABCDEFGHIJKLMNPOQRSTUVWXYZabcdefghijkmnopqrstuvwxyz123456789'; 
		    var maxPos = $chars.length;
		    var pwd = '';
		    for (i = 0; i < len; i++) {
		        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
		    }
		    return pwd;
		}

		//预览图片
		$(":file").change(function() {
			// getObjectURL是自定义的函数，见下面  
			// this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个  
			// ，但是这里只读取第一个  
			var fileList = this.files;
			var imgobj = $(this).next().next();//第一个img
			imgobj.nextAll(".addImg").remove(); //将后续添加的兄弟节点去掉再重新添加
			for (var i = 0; i < fileList.length; i++) {
				var randrom = _getRandomString(32);
				var picHtml = '<img src="" class="addImg" id="img'+randrom+'" />';
				var objUrl = getObjectURL(this.files[i]);
				imgobj.after(picHtml);
				$("#img"+randrom).attr("src", objUrl);
			}
		});
		//建立一個可存取到該file的url  
		function getObjectURL(file) {
			var url = null;
			// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
			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>

记录下主要思想：

首先上传前的必备不能少，虽然此次没有实现上传功能：表单提交为post，声明enctype="multipart/form-data"以及文本框类型为file，另外需要多文件上传需要多声明一个multiple=“multiple”；
目前表单声明一个隐藏的img标签（后续没有用到，有兴趣可以稍微优化下），再通过此标签动态的在后面添加img标签，在对其赋予一个可读取file的url，以达到显示多图片的效果；在谷歌和火狐浏览器亲测通过。
对动态的img标签使用了一个类似于java UUID的随机字符串命名（为什么呢？），因为只是使用循环的***i***来声明img标签时，如果有两个文件上传按钮来上传多文件时会造成id重复，导致图片显示不出；当然上述代码没有这个问题，使用***i***来对img命名即可。

目前发现个bug，就是在有两个上传文件时，先上传后面的图片，再上传前面的图片，会将后面的预览图删除，但文件还是存在的，如有上传不会不影响，留待后续有时间再来解决。

参考文章：
https://blog.csdn.net/yqxllwy/article/details/52470636
http://www.jq22.com/webqd3746
https://blog.csdn.net/fengqingtao2008/article/details/41514159
https://www.cnblogs.com/weijieyun/p/6103829.html

xing觀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 多图片上传前的预览

基于jQuery 多图片上传前的预览，好东西赶紧记录下来，嘻嘻；废话不多说，先看效果：代码也很简单，由于引用了在线资源库，可以直接拷贝运行。<!DOCTYPE html><html><head><title>HTML5上传图片预览</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><bod
复制链接

扫一扫