先回顯圖片再上傳

先回顯圖片再上傳

平時開發時可能會遇到上傳圖片問題，但如果是上傳圖片，多數是先進行上傳然後才能回顯，

今天給大家介紹一個簡單的上傳前先對圖片進行回顯的方式，僅用一小部分js代碼即可實現

js代碼部分

// 關於上傳封面圖片的回顯
	function getobj(obj) {
		return document.getElementById(obj);
	}
	function upload(f){

		var str = "";
		for(var i=0;i<f.length;i++){
			var reader = new FileReader();
			reader.readAsDataURL(f[i]);
			reader.onload = function(e){
				str+='<img src="'+e.target.result+'" width="130px" height="130px"/>';
				getobj("huixian").innerHTML = str;
			}
		}

	}

　　

html部分

<div class="form-group">
						<label class="col-sm-2 control-label" for="image">上傳封面圖片</label> 
						<div th:id="huixian"></div>建議130px*130px
						<input type="file" id="image" οnchange="upload(this.files)" style="padding-left: 300px;">
					</div>

　　此功能就實現了，然後上傳的話把html代碼放進表單中按正常的文件上傳就行了