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

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);
			}
		}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值