Form表单与ajax提交文件方式

 

利用form表单提交文件

django项目中创建个PutFile.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{*multipart/form-data 设置以原数据方式发送到后台*}

<form action="/putfile/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>用户名<input type="text" name="user"></p>
    <p><input type="file" name="myFile"></p>
    <input type="submit">
</form>
</body>
</html>

urls.py中设置访问url为  

url(r'^putfile/', views.putfile),

views中的putfile视图

def putfile(request):
    if request.method=="POST":
        print(request.FILES)#<MultiValueDict: {'myFile': [<InMemoryUploadedFile: 2.png (image/png)>]}>
        file_obj=request.FILES.get("myFile")
        print(file_obj.name)#2.png
        with open(file_obj.name,"wb") as f:
            for line in file_obj:
                f.write(line)
        return HttpResponse("上传成功")
    return render(request,"PutFile.html")

点击提交

这样form表单就把文件保存到了服务端。

form表单将原生文件以二进制方式传给后端，后端拿到file对象，迭代写入文件中。

 

ajax提交文件

PutFile.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
</head>
<body>
<form action="/putfile/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>用户名<input type="text" name="user" id="user"></p>
    <p><input type="file" name="myFile" id="file"></p>
    <input type="submit">
</form>
<button>ajaxsend</button>
<script>
    $("button").click(function () {
{#        实例化一个formdata字典对象#}
        var formdata=new FormData();
        formdata.append("username",$("#user").val())
{#        拿到文件信息：File(37339){name:"2.png",lastModified:1504694322000,lastModifiedDate:Web Sep 06 2017 18:38:42GMT+0800(中国标准时间),webkitRelativePath:"",size:37339,...}#}
        formdata.append("imgFile",$("#file")[0].files[0])
        formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
        $.ajax({
            url:"/putfile/",
            type:"POST",
            data:formdata,

{#            是否预处理#}
            processData:false,
            {#          做什么样的处理请求数据类型#}
            contentType:false,
            success:function(data){
                console.log(data)
            }
        })
    })
</script>
</body>
</html>

ajax传送文件需要 实例化一个formdata字典对象来保存数据，并且需要

            processData:false
            contentType:false
两个参数保证数据原始即二进制数据。

views.py中
def putfile(request):
    if request.is_ajax():
        print(request.FILES)
        file_obj = request.FILES.get("imgFile")
        print(file_obj.name)
        with open(file_obj.name, "wb") as f:
            for line in file_obj:
                f.write(line)
        return HttpResponse("ok")

   
    return render(request,"PutFile.html")

还是一样的套路，从request.Files中拿到文件对象进行保存

 

 

头像前端实现更换后更换

    $("#file").change(function () {

          var choose_file=$("#file")[0].files[0];

          var reader=new FileReader();

         reader.readAsDataURL(choose_file);

         reader.onload=function () {
            $("#avatar_img").attr("src",this.result)
        }

 

posted @ 2017-12-12 20:21  wateligx  阅读(962)  评论(0)  编辑  收藏  举报