JSP頁面圖片回顯

 jsp表單要注意是post,並且加上這個enctype="multipart/form-data"

	 <form id="funFrom" action="${btn}" method="post" enctype="multipart/form-data">
<img id="carouselPicAddress1" style="width:200px;height:200px;" alt="" src="<%=basePath%>${good.carouselPicAddress1}">

<input id="carouselPicAddress1img" class="form-control" type="file" style="height: 30px;width:80%;display: inline;"  name="carouselPicAddress1img" value="${good.carouselPicAddress1}">
	</form>

js代碼:需要注意的是input的id名在img基礎上加了img,爲了方便js找到ID

$(function(){
    	  //文件回顯
     	 	$("input[type=file]").bind('input propertychange', function(){
     	 		var fileID = $(this).attr("id")
     	 		var imgID = fileID.substring(0,fileID.length-3)
     	 		if($(this).val()){
    			var reads = new FileReader();
				f = document.getElementById(fileID).files[0];
				reads.readAsDataURL(f);
				reads.onload = function(e) {
	 			  document.getElementById(imgID).src = this.result;
											};	
    							} 
    		})
      })   

 

發佈了159 篇原創文章 · 獲贊 109 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章