html5手機端多圖片上傳代碼



102 404 135



特效描述:html5手機端 多圖片上傳代碼,html5手機端多圖片上傳代碼

代碼結構

1. HTML代碼

<div class="container">
	<!--    照片添加    -->
	<div class="z_photo">
		<div class="z_file">
			<input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
		</div>
	</div>
	<!--遮罩層-->
	<div class="z_mask">
		<!--彈出框-->
		<div class="z_alert">
			<p>確定要刪除這張圖片嗎?</p>
			<p>
				<span class="z_cancel">取消</span>
				<span class="z_sure">確定</span>
			</p>
		</div>
	</div>
</div>
<script type="text/javascript">
	//px轉換為rem
	(function(doc, win) {
		var docEl = doc.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function() {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				if (clientWidth >= 640) {
					docEl.style.fontSize = '100px';
				} else {
					docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
				}
			};
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
	function imgChange(obj1, obj2) {
		//獲取點擊的文本框
		var file = document.getElementById("file");
		//存放圖片的父級元素
		var imgContainer = document.getElementsByClassName(obj1)[0];
		//獲取的圖片文件
		var fileList = file.files;
		//文本框的父級元素
		var input = document.getElementsByClassName(obj2)[0];
		var imgArr = [];
		//遍歷獲取到得圖片文件
		for (var i = 0; i < fileList.length; i++) {
			var imgUrl = window.URL.createObjectURL(file.files[i]);
			imgArr.push(imgUrl);
			var img = document.createElement("img");
			img.setAttribute("src", imgArr[i]);
			var imgAdd = document.createElement("div");
			imgAdd.setAttribute("class", "z_addImg");
			imgAdd.appendChild(img);
			imgContainer.appendChild(imgAdd);
		};
		imgRemove();
	};
	function imgRemove() {
		var imgList = document.getElementsByClassName("z_addImg");
		var mask = document.getElementsByClassName("z_mask")[0];
		var cancel = document.getElementsByClassName("z_cancel")[0];
		var sure = document.getElementsByClassName("z_sure")[0];
		for (var j = 0; j < imgList.length; j++) {
			imgList[j].index = j;
			imgList[j].onclick = function() {
				var t = this;
				mask.style.display = "block";
				cancel.onclick = function() {
					mask.style.display = "none";
				};
				sure.onclick = function() {
					mask.style.display = "none";
					t.style.display = "none";
				};
			}
		};
	};
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 頭像上傳 圖片上傳 文字提示框 提示文字 添加刪除
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子