在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。
常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。
这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。
以下是实现上述思路的方法：
<div style="margin-left: 30px; margin-top: 30px">
<form action="">
<h3>用户注册</h3>
<p>用户名：<input type="text" name="userName"></p>
<p>密码：<input type="password" name="password"></p>
<p>邮箱：<input type="text" name="email"></p>
<input id="avatar" type="text" value="/static/images/sample.png" name="avatar" style="width: 400px"> {# 实际应用中要将该input标签隐藏，display:none; #}
<p><input type="submit" value="注册"></p>
</form>
<div style="position: absolute; top: 85px; left: 300px;">
<input id="avatarSlect" type="file" style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;">
<img id="avatarPreview" src="" title="点击更换图片" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px">
</div>
</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
$(function () {
bindAvatar();
});
function bindAvatar() {
if(window.URL.createObjectURL){
bindAvatar3();
//}else if(window.FileReader){
// bindAvatar2();
}else {
bindAvatar1();
}
}
/*Ajax上传至后台并返回图片的url*/
function bindAvatar1() {
$("#avatarSlect").change(function () {
var csrf = $("input[name=‘csrfmiddlewaretoken‘]").val();
var formData=new FormData();
formData.append("csrfmiddlewaretoken",csrf);
formData.append(‘avatar‘, $("#avatarSlect")[0].files[0]); /*获取上传的图片对象*/
$.ajax({
url: ‘/upload_avatar/‘,
type: ‘POST‘,
data: formData,
contentType: false,
processData: false,
success: function (args) {
console.log(args); /*服务器端的图片地址*/
$("#avatarPreview").attr(‘src‘,‘/‘+args); /*预览图片*/
$("#avatar").val(‘/‘+args); /*将服务端的图片url赋值给form表单的隐藏input标签*/
}
})
})
}
/*window.FileReader本地预览*/
function bindAvatar2() {
console.log(2);
$("#avatarSlect").change(function () {
var obj=$("#avatarSlect")[0].files[0];
var fr=new FileReader();
fr.onload=function () {
$("#avatarPreview").attr(‘src‘,this.result);
console.log(this.result);
$("#avatar").val(this.result);
};
fr.readAsDataURL(obj);
})
}
/*window.URL.createObjectURL本地预览*/
function bindAvatar3() {
console.log(3);
$("#avatarSlect").change(function () {
var obj = $("#avatarSlect")[0].files[0];
var wuc = window.URL.createObjectURL(obj);
$("#avatarPreview").attr(‘src‘, wuc);
$("#avatar").val(wuc);
//$("#avatarPreview").load(function () { /*当图片加载后释放内存空间，但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
// //window.URL.revokeObjectURL(wuc)
//});
})
};
</script>
更简洁的代码
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<div>
<img width="400" height="500" />
</div>
<input name="subimage" type="file" multiple accept="image/*" />
<input type="submit" value="提交" />
<script type="text/javascript">
$("input").change(function () {
var files = this.files;
if (!files.length) {
return;
}
$("img").attr("src", window.URL.createObjectURL(files[0]));
});
</script>