django之图片预览实现方法

最新推荐文章于 2022-11-17 20:58:05 发布

weixin_30402343

最新推荐文章于 2022-11-17 20:58:05 发布

阅读量632

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：http://www.cnblogs.com/longyunfeigu/p/8687785.html

本文介绍了使用jQuery进行循环操作的方法及FormData对象提交二进制数据的技巧，包括如何利用FormData对象上传文件，设置请求头避免数据被处理成JSON格式，以及如何通过前端代码实现头像预览等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 jquery实现循环的两种方式

$.each(数组/对象,function(i,v){})
$("div").each(function(i,v){})

二、提交二进制数据用FormData

var formData=new FormData();
formData.append("username",$("#id_username").val()); 
formData.append("email",$("#id_email").val());
formData.append("tel",$("#id_tel").val());
formData.append("password",$("#id_password").val());
formData.append("password_again",$("#id_password_again").val());
formData.append("avatar_img",$("#avatar")[0].files[0]);

必须加上

contentType:false
processData:false

三、判断是什么请求

request.ajax()

四、类似于static的media

在settings.py做如下配置

MEDIA_URL="/media/"  #别名
MEDIA_ROOT=os.path.join(BASE_DIR,"app01","media","uploads")   #具体路径

urls.py的配置

from django.views.static import serve
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

用处

用处一：
 avatar = models.FileField(verbose_name='头像', upload_to='avatar', default="/avatar/default.png")
会把接收的文件放在media指代的路径与upload_to的拼接：BASE_DIR+blog+media+uploads+avatar/a.png
avatar字段在数据库中保存的是：avatar/a.png
 
用处二：                                           
`<img src="/media/avatar/a.png">`

五、头像预览

$(".avatar_file").change(function () {
       var ele_file = $(this)[0].files[0]; 当前选中的文件
       `var reader = new FileReader();`
      ` reader.readAsDataURL(ele_file);` 对应找到打开的url
       `reader.onload`=function () {
            # 方法一
            $(".avatar_img").attr("src",this.result) ; this.result是上面找到的url
            # 方法二
            $(".avatar_img")[0].src=this.result; 设置图片属性
            }
        })

<div class="form-group avatar">
       <label for="avatar">头像：</label>
        `<img src="/static/image/default.png" alt="" class="avatar_img">`
        <input type="file" id="avatar" name="avatar_file" class="avatar_file">
</div>

.avatar{
    position: relative;
    width: 70px;
    height: 70px;
}
.avatar_img,.avatar_file{
    position: absolute;
    width: 70px;
    height: 70px;
    top: 0;
    left: 46px;
}
.avatar_file{
    opacity: 0;
}

转载于:https://www.cnblogs.com/longyunfeigu/p/8687785.html