上传头像

我们需要实现的效果是:当我们点击默认头像,用户可以进行选择要上传的头像文件,其原理就是头像的img标签与文件input(file类型)框重合或者关联,可以通过如下两种方式进行实现:

方法一label关联

将img标签放在label标签中,通过label标签for与input标签的id关联,并将input标签隐藏,便可以实现我们需要的功能,代码如下:

 <label for="avatar">头像&nbsp;&nbsp;
<img id="avatar_img" src="/static/img/default.png" alt="" width="" height=""></label>
{# label与input id绑定在一起,可以实现效果#}
<input type="file" style="display: none;" id="avatar">

方法二:重合实现

<div class="avatar_box">
<img src="/static/img/default.png" alt="" id="avatar_img">
<input type="file" class="form-control" id="avatar_file">
</div>

若使二者能够重合,且点击时是进行上传文件操作,要求input放在上面,而不能被看见,不能设置隐藏,就需要对其透明度进行设置,总体的css设置如下:

头像预览--> reader

预览图片(与服务器无关),当用户选中图片,将url赋给src
    // 头像预览
$("#avatar").change(function () {
var choose_file = $(this)[0].files[0]; //获取上传文件对象
var reader = new FileReader();
// 实例化一个阅读器对象
reader.readAsDataURL(choose_file);
// 读url ----> 将图片的url通过阅读器读出来结果在reader.result
// 绑定图片的标签 // 绑定事件是为了防止上面语句还未将图片读完
reader.onload = function () {
$("#avatar_img").attr("src", this.result)
}
});

文件上传

form上传

ajax上传

jquery中的each循环

  each循环主要有两种应用形式,一种是对查询到的标签对象循环,另一种就是对已知的序列数据进行循环,具体介绍实例如下:

-----------------------------

---------------------

关于media配置(用户上传的信息)

可以使用static,但Django有提供这个功能

静态文件:static---->css、js、img、font(字体)

用户上传文件: media---->avatar、.....

只针对FileField,ImageField字段:(用户能直接访问到照片)

<img id="avatar_img" src="/static/img/default.png" alt="" width="" height=""></label>
// 默认会将FielField字段中的upload_to参数对应的值avatar文件下载到项目的根目录下 如果在setting里配置
# media配置(放置用户上传的文件)
MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media") // 将FileField字段中的upload_to参数对应的值avatar下载到MEDIA_ROOT指定的路径
使用media配置
settings.py
MEDIA_URL="/media/" urls.py
from blog import views
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

// 总结

// 针对FileField,Imagefield字段:

// 使用的话,(在页面用户能访问到)
在url.py
# 给media配置的信息
from blog import views
from django.views.static import serve
from cnblog import settings url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), // 如果在settings配置了一句: MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media")
将FileField字段中的upload_to参数对应的值avatars下载MEDIA_ROOT路径下

avatar 只保存url

python 之头像上传,预览的更多相关文章

  1. jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  2. php头像上传预览

    php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过fo ...

  3. php部分--头像上传预览

    前台页面显示 <style type="text/css"> #yl{ width:200px; height:300px; background-image:url( ...

  4. input file图片上传预览

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  5. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  6. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  7. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  8. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

  9. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  10. PHP WAMP 文件上传 及 简单的上传预览

    ...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...

随机推荐

  1. Dive into Spring framework -- 了解基本原理(一)

    在继续我们的分析之前,推荐各位静心来读一下<<Expert_OneOne_J2EE_Design_and_Development>> 第四章, 正如spring BeanFac ...

  2. Centos7 安装Power Shell

    Centos7 安装Power Shell 1 查看版本 # cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) 2 安装 # R ...

  3. jQuery实际案例⑤——仿京东侧边栏(楼层)

    楼层:①页面滑动到哪块儿“楼层”就显示到哪个:②点击某“楼层”页面滚动到对应的位置:③点击“返回”回到页面顶部 实现:①使用$(window).scroll(function(){ });  //监视 ...

  4. 如何调试nRF5 SDK

    本文将讲述Nordic nRF5 SDK的主要调试手段,以帮助大家快速定位问题,并解决问题.一般来说,你可以通过打log方式,IDE的debug模式,SDK自带的app_error_check函数,以 ...

  5. LeetCode第[84]题(Java):Largest Rectangle in Histogram(最大的矩形柱状图)

    题目:最大的矩形柱状图 难度:hard 题目内容: Given n non-negative integers representing the histogram's bar height wher ...

  6. ajax实现用户注册

    需求分析 页面中给出注册表单: 在username input标签中绑定onblur事件处理函数. 当input标签失去焦点后获取 username表单字段的值,向服务端发送AJAX请求: djang ...

  7. 基于JQuery 的消息提示框效果代码

    提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...

  8. 搞懂分布式技术10:LVS实现负载均衡的原理与实践

    搞懂分布式技术10:LVS实现负载均衡的原理与实践 浅析负载均衡及LVS实现 原创: fireflyc 写程序的康德 2017-09-19 负载均衡 负载均衡(Load Balance,缩写LB)是一 ...

  9. 4.彻底理解synchronized

    1. synchronized简介 在学习知识前,我们先来看一个现象: public class SynchronizedDemo implements Runnable {    private s ...

  10. ffmpeg播放RTSP的一点优化

    简单记录一下最近使用ffmpeg播放RTSP做的一点参数优化. 先做如下定义: AVDictionary* options = NULL; 1.画质优化 原生的ffmpeg参数在对1920x1080的 ...