python 实现上传图片并预览的3种方法(推荐)


Posted in Python onJuly 14, 2017

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

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

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

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

1. 模板文件

test.html

<!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(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);
{#           $("#avatarUrl").load(function () {#}    /*当图片加载后释放内存空间,但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
{#               window.URL.revokeObjectURL(wuc);#}
{#      })#}
   })
 }

</script>
</html>

2. 视图函数

upload_avatar.py

from django.shortcuts import render, HttpResponse


def test(request):
  return render(request, 'test.html')


def upload_avatar(request):
  file_obj = request.FILES.get('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. 路由系统

urls.py

from django.conf.urls import url
from django.contrib 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/', homeViews.test), # 测试页面
]

验证效果:

选择图片前:

python 实现上传图片并预览的3种方法(推荐)

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

python 实现上传图片并预览的3种方法(推荐)

window.FileReader本地预览,form表单提交:

python 实现上传图片并预览的3种方法(推荐)

window.URL.createObjectURL本地预览,form表单提交:

python 实现上传图片并预览的3种方法(推荐)

以上这篇python 实现上传图片并预览的3种方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python使用urlparse分析网址中域名的方法
Apr 15 Python
python动态加载包的方法小结
Apr 18 Python
Python的collections模块中的OrderedDict有序字典
Jul 07 Python
Python中遇到的小问题及解决方法汇总
Jan 11 Python
PyQt实现界面翻转切换效果
Apr 20 Python
python-tkinter之按钮的使用,开关方法
Jun 11 Python
python中如何使用insert函数
Jan 09 Python
Python基于Tensor FLow的图像处理操作详解
Jan 15 Python
Python 一行代码能实现丧心病狂的功能
Jan 18 Python
Python requests获取网页常用方法解析
Feb 20 Python
两行代码解决Jupyter Notebook中文不能显示的问题
Apr 24 Python
python ConfigParser库的使用及遇到的坑
Feb 12 Python
Python加密方法小结【md5,base64,sha1】
Jul 13 #Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
Jul 13 #Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
Jul 13 #Python
简单易懂的python环境安装教程
Jul 13 #Python
Python2.7读取PDF文件的方法示例
Jul 13 #Python
Python使用win32com实现的模拟浏览器功能示例
Jul 13 #Python
python3 模拟登录v2ex实例讲解
Jul 13 #Python
You might like
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
让python在hadoop上跑起来
2016/01/27 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
简单了解django orm中介模型
2019/07/30 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
服装公司总经理岗位职责
2013/11/30 职场文书
大学生个人求职信
2014/06/02 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers