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+json 通用三级联动下拉列表
Apr 19 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
Jquery中map函数的用法
Jun 03 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
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
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
web.js.字符串与正则表达式操作
2017/05/13 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Django中的forms组件实例详解
2018/11/08 Python
python文字转语音实现过程解析
2019/11/12 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
运动会演讲稿
2014/05/07 职场文书
搞笑的获奖感言
2014/08/16 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
接待员岗位职责
2015/02/13 职场文书
慰问信范文
2015/02/14 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技