JS实现上传图⽚的三种⽅法并实现预览图⽚功能
在常见的⽤户注册页⾯，需要⽤户在本地选择⼀张图⽚作为头像，并同时预览。
常见的思路有两种：⼀是将图⽚上传⾄服务器的临时⽂件夹中，并返回该图⽚的url，然后渲染在html页⾯；另⼀种思路是，直接在
本地内存中预览图⽚，⽤户确认提交后再上传⾄服务器保存。
这两种⽅法各有利弊，⽅法⼀很明显，浪费流量和服务器资源；⽅法⼆则加重了浏览器的负担，并且对浏览器的兼容性要求更⾼
（在某些低版本中的IE浏览器不⽀持）。
以下是实现上述思路的⽅法：
1. 模板⽂件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<form action="">
{% csrf_token %}
<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" > {# 实际应⽤中要将该input标签隐藏，display:none; #}      <p><input type="submit" value="注册"></p>
</form>
<div >
<input id="avatarSlect" type="file" >
<img id="avatarPreview" src="/static/images/sample.png" title="点击更换图⽚" >      </div>
</div>
</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
$(function () {
bindAvatar();
});
function bindAvatar() {
if(ateObjectURL){
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();
$("#avatarPreview").attr('src',sult);
console.sult);
$("#avatar").sult);
};
})
}
/*ateObjectURL本地预览*/
function bindAvatar3() {
console.log(3);
$("#avatarSlect").change(function () {
var obj=$("#avatarSlect")[0].files[0];
var wuc=ateObjectURL(obj);
$("#avatarPreview").attr('src',wuc);
$("#avatar").val(wuc);
{#          $("#avatarPreview").load(function () {#}    /*当图⽚加载后释放内存空间，但在jQuery3.2.1中会报错。浏览器关闭后也会⾃动释放*/ {#              vokeObjectURL(wuc);#}
{#      })#}
})注册页面js特效
}
</script>
</html>
2. 视图函数
from django.shortcuts import render, HttpResponse
def test(request):
return render(request, 'test.html')
def upload_avatar(request):
file_obj = ('avatar')
file_path = os.path.join('static/images', file_obj.name)
with open(file_path, 'wb') as f:
for chunk in file_obj.chunks():
f.write(chunk)
return HttpResponse(file_path)
3. 路由系统
f.urls import url
ib import admin
from home import views as homeViews
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^upload_avatar/', homeViews.upload_avatar), # 上传头像
url(r'^test/', st), # 测试页⾯
]
验证效果：
选择图⽚前：
Ajax上传图⽚⾄服务器，并返回浏览器该图⽚的url：
window.FileReader本地预览，form表单提交：
ateObjectURL本地预览，form表单提交：
以上所述是⼩编给⼤家介绍的JS实现上传图⽚的三种⽅法并实现预览图⽚功能，希望对⼤家有所帮助，
如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！