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实现抓取页面上链接的简单爬虫分享
Jan 21 Python
python实现同时给多个变量赋值的方法
Apr 30 Python
python实现的希尔排序算法实例
Jul 01 Python
win8下python3.4安装和环境配置图文教程
Jul 31 Python
python3的print()函数的用法图文讲解
Jul 16 Python
详解Python并发编程之从性能角度来初探并发编程
Aug 23 Python
python调用Matplotlib绘制分布点图
Oct 18 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
Jan 03 Python
Python-numpy实现灰度图像的分块和合并方式
Jan 09 Python
keras的三种模型实现与区别说明
Jul 03 Python
python基于win32api实现键盘输入
Dec 09 Python
详解Python中的Lock和Rlock
Jan 26 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/10/26 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP多维数组排序array详解
2017/11/21 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python解析多层json操作示例
2019/12/30 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
中药专业大学生医药工作求职信
2013/10/25 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
大课间活动实施方案
2014/03/06 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
施工质量承诺书范文
2014/05/30 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Go timer如何调度
2021/06/09 Golang
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python