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 相关文章推荐
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
如何在Vue.JS中使用图标组件
Aug 04 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP会话控制实例分析
2016/12/24 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
继续学习javascript闭包
2015/12/03 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python:动态路由的Flask程序代码
2019/11/22 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
人事部经理岗位职责
2014/03/07 职场文书
行政人事岗位职责
2014/03/17 职场文书
求职信怎么写
2014/05/23 职场文书
小区推广策划方案
2014/06/06 职场文书
文案策划专业自荐信
2014/07/07 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
在职员工证明书
2014/09/19 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL