zoukankan      html  css  js  c++  java
  • 头像图片上传、预览、传后端、media配置

    1、注册页面因为使用form组件,后端forms.py文件中无avatar字段,所以前端应该单独写个标签,来处理avatar。      {% csrf_token %}

            <div class="col-md-6 col-md-offset-3">
                <form action="" novalidate>
    
                   {#     form组件#}
                    {% for field in form %}
                        <div class="form-group">
                            <label for="">{{ field.label }}</label>
                            {{ field }} <span class="error pull-right"></span>
                        </div>
                    {% endfor %}
    
                      {#    图片#}
                    <div class="form-group">
                        <label for="avatar">头像<img class="avatar" src="/static/img/default.png" alt=""></label>
                        <input type="file" id="avatar">
                    </div>
    
                          {#     提交#}
                    <input type="button" class="btn btn-default reg_btn pull-right" value="提交"><span class="error"
                                                                                                     style="color: red;margin-left: 20px"></span>
                </form>
            </div>         
    页面代码

    2、预览js部分代码(onload 事件会在页面或图像加载完成后立即发生。window.onload事件会在页面加载完成后触发)

        // 图像预览
        $("#avatar").change(function () {
            {#找到上传的图片文件#}
            var choose_file = $(this)[0].files[0];
            {#实例化一个filereader对象#}
            var reader = new FileReader();
            reader.readAsDataURL(choose_file);
            {#src是固定写法,why未知#}
            reader.onload = function () {
                $(".avatar").attr("src", reader.result)
            }
        });
    
        // 图像预览(百度版)
    $("input[type='file']").on('change', function () {
        var oFReader = new FileReader();
        var file = document.getElementById('input-file').files[0];
        Reader.readAsDataURL(file);
    
        oFReader.onloadend = function(oFRevent){
            var src = oFRevent.target.result;
            $('.content').attr('src',src);
            alert(src);
        }
    });
    图像预览js

    3、注意

    1、label 里面放src="/static/img/default.png" 默认图片(创建static/img文件夹以及文件);input type是file  
    2、预览change事件给< input type=“file”>  绑定 ,而不是label,所以是$(this) 
    3、fakepath 这里的fakepath就是现代浏览器为了隐藏了文件实际路径而生成的字符串。
    4、后端取得图片数据,request.FILES.get("avatar"),不是POST.get("avatar")!!!

    4、利用ajax上传文件代码 formdata

    <script>
     // 注册事件
        $(".reg_btn").click(function () {
            var formdata = new FormData();
            formdata.append("user", $("#id_user").val());
            formdata.append("pwd", $("#id_pwd").val());
            formdata.append("repeat_pwd",  $("#id_repeat_pwd").val());
            formdata.append("email", $("#id_email").val());
            formdata.append("avatar", $("#avatar")[0].files[0]);
            formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
    
    
            $.ajax({
                url: "",
                type: "post",
                processData: false,
                contentType: false,
                data: formdata,
                success: function (data) { alert("上传成功!")
                }
            });
    
        })
    </script>
    js

    ajax提交的数据使用的formdata 里面的k 应该和form组件内的k一样,除非不校验  例如 图片!!!

    processData设置为false。因为data值是FormData对象,不需要对数据做处理。

    <form>标签添加enctype="multipart/form-data"属性。

    cache设置为false,上传文件不需要缓存。

    contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

    5、Media配置

    不希望把用户上传的放在static中,app下创建media/avatars文件夹。

    http://www.cnblogs.com/yuanchenqi/articles/7629939.html#_label5

    html
    <label for="avatar">头像<img class="avatar" src="/static/img/default.png" alt=""></label>
    <input type="file" id="avatar">
    class UserInfo(AbstractUser):

        avatar=models.FileField(upload_to='avatars/',default="/avatars/default.png")
    
    #如果实例化一个user对象,avatar字段接受一个文件对象,这个文件对象会默认存到项目的根目录的。
    
    配置
    settings.py
    MEDIA_ROOT=os.path.join(BASE_DIR,"app01","media")  
    #  blog(app)_media_avatar文件夹中  
    MEDIA_URL="/media/"
    
    项目urls.py
    from django.views.static import serve
    from bbs_blog_project import settings
    urlpatterns    url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
  • 相关阅读:
    c语言 423输出直角在右上角的等腰直角三角形
    R语言中aggregate函数进行整合数据
    c语言 425输出向下的金字塔
    C语言 423 输出直角在左上角的等腰直角三角形
    c语言 422 显示出一个横向较长的长方形
    R语言中subset函数
    R语言中for、while、if else、switch语句
    c语言 424 输出金字塔性状
    R语言中apply函数
    WinCE文件基本操作
  • 原文地址:https://www.cnblogs.com/nick477931661/p/8859202.html
Copyright © 2011-2022 走看看