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 相关文章推荐
Python3一行代码实现图片文字识别的示例
Jan 15 Python
python查看模块安装位置的方法
Oct 16 Python
Python3 关于pycharm自动导入包快捷设置的方法
Jan 16 Python
Django框架实现的普通登录案例【使用POST方法】
May 15 Python
画pytorch模型图,以及参数计算的方法
Aug 17 Python
python zip()函数使用方法解析
Oct 31 Python
python通用读取vcf文件的类(复制粘贴即可用)
Feb 29 Python
python实现TCP文件传输
Mar 20 Python
Python 跨.py文件调用自定义函数说明
Jun 01 Python
基于python实现计算两组数据P值
Jul 10 Python
python -v 报错问题的解决方法
Sep 15 Python
Python通过len函数返回对象长度
Oct 22 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP 和 COM
2006/10/09 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php实现mysql封装类示例
2014/05/07 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
基于python实现学生信息管理系统
2019/11/22 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
Python代码注释规范代码实例解析
2020/08/14 Python
如何在pycharm中安装第三方包
2020/10/27 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
XML文档面试题
2015/08/05 面试题
校园元旦活动总结
2014/07/09 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
无故旷工检讨书
2015/08/15 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers