JS实现上传图片的三种方法并实现预览图片功能

转载地址：https://www.cnblogs.com/OldJack/p/7163725.html

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。

常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。

这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。

以下是实现上述思路的方法：

1. 模板文件

1
2
3
4
5
6
7
8

9
10 {% csrf_token %}
11

用户注册

12

用户名：

13

密码：

14

邮箱：

15 {# 实际应用中要将该input标签隐藏，display:none; #}
16

17
18

19
20
21

22

2. 视图函数

1 from django.shortcuts import render, HttpResponse
2
3
4 def test(request):
5 return render(request, 'test.html')
6
7
8 def upload_avatar(request):
9 file_obj = request.FILES.get('avatar')
10 file_path = os.path.join('static/images', file_obj.name)
11 with open(file_path, 'wb') as f:
12 for chunk in file_obj.chunks():
13 f.write(chunk)
14 return HttpResponse(file_path)
upload_avatar.py

3. 路由系统

1 from django.conf.urls import url
2 from django.contrib import admin
3 from home import views as homeViews
4
5 urlpatterns = [
6 url(r'^admin/', admin.site.urls),
7 url(r'^upload_avatar/', homeViews.upload_avatar), # 上传头像
8 url(r'^test/', homeViews.test), # 测试页面
9 ]
urls.py

验证效果：

选择图片前：

Ajax上传图片至服务器，并返回浏览器该图片的url：

window.FileReader本地预览，form表单提交：

 window.URL.createObjectURL本地预览，form表单提交：

转载地址：https://www.cnblogs.com/OldJack/p/7163725.html