1. 程式人生 > >前端 上傳預覽功能實現

前端 上傳預覽功能實現

rip log wid 直接 java ner box ava urn

 <div  style="position: relative;">
     <input id="files" type="file" onchange="previewImage(this, ‘prvid‘)" multiple="multiple" style="cursor: pointer;z-index: 9999;position: absolute;opacity: 0;padding: 80px 0px;">  
      <div id="prvid" style="border: 1px solid #bfbfbf; height: 160px; width: 270px; border-radius: 10px;"
> <img src="../resources/imgs/selectImg.png" style="position: absolute;top: 50px;left: 130px;" /> <p class="showFileName" style="margin-top: 95px;color: #bfbfbf; text-align: center;">選擇文件</p> </div> </div>
function previewImage(file, prvid) { 
	/* file:file控件 
	* prvid: 圖片預覽容器 
	*/ 
	var prvbox = document.getElementById(prvid);
	var tip = "請上傳jpg/png/gif格式的圖片文件!"; // 設定提示信息 
	var filters = { 
	"jpeg" : "/9j/4", 
	"gif" : "R0lGOD", 
	"png" : "iVBORw" 
	} 
	var html1 = ‘<img src="../resources/imgs/selectImg.png" style="position: absolute;top: 50px;left: 130px;" />‘+ 
        		‘<p class="showFileName" style="margin-top: 95px;color: #bfbfbf; text-align: center;">選擇文件</p>‘;
	if (window.FileReader) { // html5方案
		var fileSize = file.files[0].size
		if(fileSize>500000){
			alert("請上傳小於500K的文件!")
			return;
		}
		for (var i=0, f; f = file.files[i]; i++) { 
			var fr = new FileReader(); 
			fr.onload = function(e) { 
			var src = e.target.result; 
			if (!validateImg(src)) { 
				alert(tip) 
				} else { 
				showPrvImg(src); 
			} 
		} 
		fr.readAsDataURL(f); 
		} 
		} else { // 降級處理

		if ( !/\.jpg$|\.png$|\.gif$/i.test(file.value) ) { 
			alert(tip); 
		} else { 
			var fileObj = file.files[0].size;
			console.log(fileObj);
			showPrvImg(file.value); 
		} 
	} 

	function validateImg(data) { 
		var pos = data.indexOf(",") + 1; 
		for (var e in filters) { 
			if (data.indexOf(filters[e]) === pos) { 
				return e; 
			} 
		} 
		return null; 
	} 

	function showPrvImg(src) { 
		var img = document.createElement("img"); 
		img.src = src; 
		img.style.width = "270px"; 
		img.style.height = "160px"; 
		img.style.borderRadius = "10px"; 
		//img.style.filter = ‘alpha(opacity:‘+50+‘)‘; //設置IE的透明度 
		//img.style.opacity = 50 / 100; //設置fierfox等透明度,註意透明度值是小數 
		prvbox.innerHTML = ""; 
		prvbox.appendChild(img); 
		var file = $("#files").val();
		var arr=file.split(‘\\‘);
		console.log(arr)
        var fileName=arr[arr.length-1];
		console.log(fileName)
		//document.getElementsByClassName(‘showFileName‘).innerHTML=fileName; 
        //$(".showFileName").val(fileName);
        //$(".showFileName").html(fileName);
		} 
	}

  直接粘代碼吧;

  然後

上傳預覽的原理就是:

    通過input的type=file屬性和window的內置FileReader對象,利用FileReader對象的readAsDataURL方法把圖片數據轉成base64字符串數據,然後把這個base64字符串數據賦值給一個圖片標簽的src屬性..

  然後

  就實現預覽效果啦

      

前端 上傳預覽功能實現