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实现数通设备端口监控示例
Apr 02 Python
Python学习笔记(二)基础语法
Jun 06 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
Jan 20 Python
Python使用dis模块把Python反编译为字节码的用法详解
Jun 14 Python
matplotlib给子图添加图例的方法
Aug 03 Python
解决Python3.5+OpenCV3.2读取图像的问题
Dec 05 Python
Django实现基于类的分页功能
Oct 31 Python
keras获得某一层或者某层权重的输出实例
Jan 24 Python
基于python生成英文版词云图代码实例
May 16 Python
树莓派4B安装Tensorflow的方法步骤
Jul 16 Python
利用Python将图片中扭曲矩形的复原
Sep 07 Python
Python开发五子棋小游戏
Apr 28 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php实现文章评论系统
2019/02/18 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
SQL Server笔试题
2012/01/10 面试题
《我的信念》教学反思
2014/02/15 职场文书
团拜会策划方案
2014/06/07 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
协议书范文
2015/01/27 职场文书
个人道歉信大全
2019/04/11 职场文书
python基础之文件操作
2021/10/24 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
海弦WR-800F
2022/04/05 无线电