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 相关文章推荐
在Heroku云平台上部署Python的Django框架的教程
Apr 20 Python
python用reduce和map把字符串转为数字的方法
Dec 19 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
Jan 08 Python
Python 查找list中的某个元素的所有的下标方法
Jun 27 Python
python实现QQ邮箱/163邮箱的邮件发送
Jan 22 Python
pyqt5实现登录界面的模板
May 30 Python
cProfile Python性能分析工具使用详解
Jul 22 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
Nov 05 Python
Django xadmin开启搜索功能的实现
Nov 15 Python
Python restful框架接口开发实现
Apr 13 Python
python 牛顿法实现逻辑回归(Logistic Regression)
Oct 15 Python
selenium3.0+python之环境搭建的方法步骤
Feb 01 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使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
js实现select下拉框选择
2020/01/11 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
js获取图片的base64编码并压缩
2020/12/05 Javascript
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
给女朋友的道歉信
2014/01/10 职场文书
教师网络培训感言
2014/03/09 职场文书
求职信名称怎么写
2014/05/26 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
2015年技术员工作总结
2015/04/10 职场文书
项目验收申请报告
2015/05/15 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP