先回显图片再上传

先回显图片再上传

平时开发时可能会遇到上传图片问题，但如果是上传图片，多数是先进行上传然后才能回显，

今天给大家介绍一个简单的上传前先对图片进行回显的方式，仅用一小部分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" onchange="upload(this.files)" style="padding-left: 300px;">
					</div>

　　此功能就实现了，然后上传的话把html代码放进表单中按正常的文件上传就行了