头像图片上传、预览、传后端、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);
    }
});

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>

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}),