ajax&js头像上传及实时显示

头像上传及实时显示

基于 Django操作

• js图片实时显示方法如下

当我们上传单个图片时， 用户已经把图片放到浏览器中， 那么我们需要把图片拿出来渲染到图片框中。

操作如下

html中
<div class="form-control">
    <label for="id_myfile">
        <img src="" alt="" width="50px" height="50px" id="id_img">  //没有初始图片，上传后显示上传图片。
    </label> 
    <input type="file" style="display: none" id="id_myfile">
</div>


js中
<script>
    $("#id_myfile").change(function () {
        const filereader = new FileReader()

        filereader.readAsDataURL($("#id_myfile")[0].files[0])
        filereader.onload = function () {
    $("#id_img").attr("src", filereader.result)
        }
    })
</script>

效果如下

代码解释

使用sj定位label标签id ， 对该标签进行监听，change（），当change监听绑定的id标签变化后实行后续代码，

即 定义一个变量，定义变量方式有三种， var，const，let，这里不做过多解释，定义变量并使用对象实例化属性因为图片保存在该对象的readAsDataURL中， 使用js取到该图片文件，最后使用attr方法渲染到特定位置，即原始图片位置，filerader.result是该图片的真实二进制文件。

提交方式两种

• ajax提交

当使用ajax提交文件是， 字符编码要指定

当取数据在FILES中取， 文件名为前端添加到js对象是取的名， 去出来后是一个文件对象， 需要循环才能存储，ORM框架提供特别方法直接调用 FileFidd方法可直接存到数据库、

js代码  
$("#btn").click(function () {
        var formdata = new FormData()
        formdata.append("file_name", $("#id_myfile")[0].files[0])
        $.ajax({
            url:'/test/',
            method:"post",
            processData:false,  //编码一定要设置为false， 让程序自动选择编码
            contentType:false,
            data: formdata,
            success:function (data) {
                //c成功后自行代码，提示用户上传成功
                alert("上传成功",data)
            },
            error:function (data) {
                //错误后执行代码
                alert("上传失败",data)

            }
        })

    })


py代码

def test(request):
    if request.method == "GET":

        return render(request, 'test.html')
    elif request.method == "POST":
        res = request.FILES.get('file_name')
        with open(res.name, 'wb') as f:  // 接收数据后保存
            for i in res:
                f.write(i)
        return JsonResponse({"name":"l"})

最后返回的是json格式字符串，ajax接收的一般都是json字符串

• form表单提交

后端代码不需要更改， 前端把需要提交的数据用form表单抱起来， 使用submit提交即可

<form action="" method="post">
        {% csrf_token %}
    <label for="id_myfile">
        <img src="" alt="" width="50px" height="50px" id="id_img">
    </label>
    <input type="file" style="display: none" id="id_myfile">
    <button type="button" id="btn">提交</button>
</form>

因为走的是http请求， 所以后端代码不需要更改。