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通过yield实现数组全排列的方法
Mar 18 Python
python正常时间和unix时间戳相互转换的方法
Apr 23 Python
基于Python socket的端口扫描程序实例代码
Feb 09 Python
python 自动去除空行的实例
Jul 24 Python
详解Python发送email的三种方式
Oct 18 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
Dec 31 Python
python列表推导式入门学习解析
Dec 02 Python
关于sys.stdout和print的区别详解
Dec 05 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
Feb 15 Python
django列表筛选功能的实现代码
Mar 27 Python
Pytorch 使用 nii数据做输入数据的操作
May 26 Python
Python创建文件夹与文件的快捷方法
Dec 08 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模板引擎SMARTY
2006/10/09 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
微信小程序中为什么使用var that=this
2019/08/27 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
python中使用序列的方法
2015/08/03 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
EJB timer的种类
2014/10/28 面试题
小学毕业家长寄语
2014/01/19 职场文书
会计专业自我评价
2014/02/12 职场文书
材料员岗位职责
2014/03/13 职场文书
药学职务聘任书
2014/03/29 职场文书
语文复习计划
2015/01/19 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
辞职信的写法
2015/02/27 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL