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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
模拟select的代码
Oct 19 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
vue生命周期实例小结
Aug 15 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
vue实现选中效果
Oct 07 Javascript
vue 动态创建组件的两种方法
Dec 31 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
php基础知识:控制结构
2006/12/13 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
js中的面向对象入门
2017/03/06 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
导致python中import错误的原因是什么
2020/07/01 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
商务英语专业毕业生自荐信
2013/11/05 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2016年父亲节寄语
2015/12/04 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers