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显示进度条的方法
Sep 20 Python
探究Python多进程编程下线程之间变量的共享问题
May 05 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
Jun 04 Python
python实现抖音视频批量下载
Jun 20 Python
Python字符串逆序输出的实例讲解
Feb 16 Python
pytorch多GPU并行运算的实现
Sep 27 Python
Anaconda 查看、创建、管理和使用python环境的方法
Dec 03 Python
使用sklearn的cross_val_score进行交叉验证实例
Feb 28 Python
python 日志 logging模块详细解析
Mar 31 Python
如何通过命令行进入python
Jul 06 Python
Pycharm安装python库的方法
Nov 24 Python
pytorch 把图片数据转化成tensor的操作
Mar 04 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
PHP goto语句用法实例
2019/08/06 PHP
php数组和链表的区别总结
2019/09/20 PHP
防止文件缓存的js代码
2013/01/10 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Django分页功能的实现代码详解
2019/07/29 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
信息技术专业个人自我评价
2013/12/11 职场文书
日化店促销方案
2014/03/26 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
环境保护建议书
2014/08/26 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
vue组件vue-esign实现电子签名
2022/04/21 Vue.js