JS实现上传图片的三种方法并实现预览图片功能


Posted in Javascript onJuly 14, 2017

在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览。

常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面;另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存。

这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持)。

以下是实现上述思路的方法:

1. 模板文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div style="margin-left: 30px; margin-top: 30px">
    <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" style="width: 400px"> {# 实际应用中要将该input标签隐藏,display:none; #}
      <p><input type="submit" value="注册"></p>
      </form>
    <div style="position: absolute; top: 85px; left: 300px;">
    <input id="avatarSlect" type="file" style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;">
    <img id="avatarPreview" src="/static/images/sample.png" title="点击更换图片" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px">
      </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);
{#           $("#avatarPreview").load(function () {#}    /*当图片加载后释放内存空间,但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
{#               window.URL.revokeObjectURL(wuc);#}
{#      })#}
   })
 }
</script>
</html>

2. 视图函数

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. 路由系统

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), # 测试页面
]

验证效果:

选择图片前:

JS实现上传图片的三种方法并实现预览图片功能

Ajax上传图片至服务器,并返回浏览器该图片的url:

JS实现上传图片的三种方法并实现预览图片功能

window.FileReader本地预览,form表单提交:

JS实现上传图片的三种方法并实现预览图片功能

 window.URL.createObjectURL本地预览,form表单提交:

JS实现上传图片的三种方法并实现预览图片功能

以上所述是小编给大家介绍的JS实现上传图片的三种方法并实现预览图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Validate初步体验(一)
Dec 12 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
js中实现继承的五种方法
Jan 25 Javascript
详解Vue的sync修饰符
May 15 Vue.js
JS实现数组去重方法总结(六种方法)
Jul 14 #Javascript
Javascript中Promise的四种常用方法总结
Jul 14 #Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 #Javascript
详解VUE中v-bind的基本用法
Jul 13 #Javascript
vue通过watch对input做字数限定的方法
Jul 13 #Javascript
深入理解vue $refs的基本用法
Jul 13 #Javascript
js自定义弹框插件的封装
Aug 24 #Javascript
You might like
实用函数9
2007/11/08 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
phalcon框架使用指南
2016/02/23 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
通过代码实例了解Python sys模块
2020/09/14 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
大学毕业感言
2014/01/10 职场文书
婚宴来宾致辞
2015/07/28 职场文书
详解Python常用的魔法方法
2021/06/03 Python
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript