图片上传或修改之前,选中的本地图片展示在页面中

html关键代码如下:

			<div class="row cl">
					<label class="form-label col-sm-2">候选人照片:</label>
					<span class="form-text col-sm-2">
						<img id="userImg" class="avatar size-XL" src=""/>
					</span>
					<div class="formControls col-sm-10" style="margin-left: 16.6%;margin-top: 1%;">
						<span class="btn-upload form-group">
							<input class="input-text upload-url" type="text"  readonly style="width:200px" />
							<a href="javascript:void();" class="btn btn-primary radius upload-btn"><i class="Hui-iconfont">&#xe642;</i> 浏览图片</a>
							<input type="file" onchange="imgUpload(this.files)" multiple name="file-1" id="avatar"  class="input-file" accept="image/*">
						</span>
					</div>
				</div>

js关键代码如下:

//注意:写在$(function(){});之外
//新增图片时,用户未选中自己本地的图片,用作默认展示的图片。如果是修改图片的业务,这里应该是显示原来的图片
$("#userImg").attr("src", "/stahtml/images/avatar-default.jpg");
//选中图片的js
// 图片显示
		function imgUpload(files) {
			var reader = new FileReader();
			reader.readAsArrayBuffer(files[0]);
			reader.onload = function (event) {
				// blob stuff
				var blob = new Blob([event.target.result]);
				window.URL = window.URL || window.webkitURL;
				var blobURL = window.URL.createObjectURL(blob);
				$("#userImg").attr("src", blobURL);
			}
		}

你可能感兴趣的:(前端,js,jquery,javascript,java)