文档章节

3种上传图片并实现预览的方法

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 00:50
字数 829
阅读 17
收藏 0

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

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

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

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

1. 模板文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="margin-left: 30px; margin-top: 30px">
 9         <form action="">
10             {% csrf_token %}
11         <h3>用户注册</h3>
12         <p>用户名:<input type="text" name="userName"></p>
13         <p>密码:<input type="password" name="password"></p>
14         <p>邮箱:<input type="text" name="email"></p>
15             <input id="avatar" type="text" value="/static/images/sample.png" name="avatar" style="width: 400px"> {# 实际应用中要将该input标签隐藏,display:none; #}
16             <p><input type="submit" value="注册"></p>
17             </form>
18         <div style="position: absolute; top: 85px; left: 300px;">
19         <input id="avatarSlect" type="file" style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;">
20         <img id="avatarPreview" src="/static/images/sample.png" title="点击更换图片" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px">
21             </div>
22     </div>
23 </body>
24 
25 <script src="/static/jquery-3.2.1.js"></script>
26 <script>
27     $(function () {
28             bindAvatar();
29   });
30     function bindAvatar() {
31             if(window.URL.createObjectURL){
32                 bindAvatar3();
33             }else if(window.FileReader){
34                 bindAvatar2();
35             }else {
36                 bindAvatar1();
37             }
38   }
39 
40     /*Ajax上传至后台并返回图片的url*/
41     function bindAvatar1() {
42         $("#avatarSlect").change(function () {
43         var csrf = $("input[name='csrfmiddlewaretoken']").val();
44         var formData=new FormData();
45         formData.append("csrfmiddlewaretoken",csrf);
46         formData.append('avatar', $("#avatarSlect")[0].files[0]);    /*获取上传的图片对象*/
47         $.ajax({
48             url: '/upload_avatar/',
49                     type: 'POST',
50                     data: formData,
51                     contentType: false,
52                     processData: false,
53                     success: function (args) {
54                 console.log(args);    /*服务器端的图片地址*/
55                             $("#avatarPreview").attr('src','/'+args);    /*预览图片*/
56                             $("#avatar").val('/'+args);    /*将服务端的图片url赋值给form表单的隐藏input标签*/
57           }
58             })
59   })
60     }
61     /*window.FileReader本地预览*/
62     function bindAvatar2() {
63         console.log(2);
64              $("#avatarSlect").change(function () {
65                      var obj=$("#avatarSlect")[0].files[0];
66                      var fr=new FileReader();
67                      fr.onload=function () {
68                              $("#avatarPreview").attr('src',this.result);
69                              console.log(this.result);
70                              $("#avatar").val(this.result);
71            };
72            fr.readAsDataURL(obj);
73        })
74   }
75   /*window.URL.createObjectURL本地预览*/
76   function bindAvatar3() {
77       console.log(3);
78             $("#avatarSlect").change(function () {
79                     var obj=$("#avatarSlect")[0].files[0];
80                     var wuc=window.URL.createObjectURL(obj);
81                      $("#avatarPreview").attr('src',wuc);
82                      $("#avatar").val(wuc);
83 {#                     $("#avatarPreview").load(function () {#}        /*当图片加载后释放内存空间,但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
84 {#                             window.URL.revokeObjectURL(wuc);#}
85 {#           })#}
86       })
87   }
88 
89 </script>
90 </html>
test.html

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表单提交:

 

本文转载自:http://www.cnblogs.com/OldJack/p/7163725.html

AllenOR灵感
粉丝 11
博文 2635
码字总数 83001
作品 0
程序员
私信 提问
如何利用FineReport制作动态树报表

在对数据字段进行分类管理时,利用动态树折叠数据是一个很好的方法,也就是点击数据前面的加号才展开对应下面的数据,如下图。那这样的效果在制作报表时该如何实现呢? 下面以报表工具FineR...

九月你好123
2016/08/24
53
0
AjaxUpload v1.3.0 发布,Javascript 异步上传插件

AjaxUpload v1.3.0 已发布。 更新内容 修复BUpload组件,管理 API 的分页第一条数据获取不到的bug 分别给 JUpload, TUpload, BUpload 三个组件实现css的自动加载功能,不需要再手动引入css 修...

阳建
2017/09/15
980
5
08-05更新ThinkPHP+swfupload多图上传实例 经典实用的php多图上传

先上一张图片给大家看看效果,有需要就下载学习。不一定非要在ThinkPHP里,只是我非常喜欢去用ThinkPHP做开发了。 好了。现在咱们需要的东西是,下载一个swfupload.js网上很多,自己百度吧....

3147972
2014/03/21
0
0
javascript实现图片伪异步上传

实现逻辑 首先要知道, ajax无法发送带有文件的post请求所以,所以还是要用同步的方式,但是刷新的时候,我们不要在原来的页面刷新,去一个隐藏的iframe里面刷新,form表单中action正常填写处...

rand
2018/08/27
0
0
Retrofit2.0上传图片

正常使用Multipart方式上传图片 第一种上传单个图片,第二种上传多个图片 @Multipart @POST(ACTION_URL) Observable<ResponseBody> uploadFiles(@Part("image"; filename="文件名.jpg") Requ......

xingjm8511
2016/05/18
475
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
11分钟前
2
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
3
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部