码迷,mamicode.com
首页 > Web开发 > 详细

ajax 文件上传

时间:2018-12-16 18:11:37      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:请求   end   ase   roc   urlencode   res   写入文件   with open   print   

在html中

<h3>ajax的文件上传</h3>


图片<input type="file" id="file" name="img">
<input type="submit" id="ajax-submit" value="ajax-上传">


{#<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>#}
<script src="/static/js/jquery-3.3.js"></script>
<script src="/static/js/ajax_setup.js"></script>
<script>
    // 注意的是页面中没有用到form表单,那么怎么提交数据呢,
    // 答案是用FormData来模拟表单中的<input type="file" id="file">

    $("#ajax-submit").click(function () {
        var form_obj = new FormData();  //文件上传 实例化一个空的FormData对象

        // 发ajax请求不需要csrf  ????
        {#form_obj.append("csrfmiddlewaretoken",csrf); //给当前的FormData添加一个键值对#}

        //form_obj.append添加的键值对的名字***** 以这种形式添加的数据类型就相当于form表单中的 enctype="multipart/form-data" 所以processData不需要再做处理
        form_obj.append("img", $("[name=‘img‘]")[0].files[0]);  //转成dom对象之后,获取里面的单个文件
        {#form_obj.append("img",$("[name=‘img‘]")[0]// 把jq对象转成dom对象#}
        {#form_obj.append("img",$("[name=‘img‘]")[0].files //files表示获取里面的多个文件#}

        $.ajax({
            url: "/file_upload/",
            type: "post",

            // ajax 文件上传的必备参数
            processData: false,//不处理数据  不写的话会做urlencode处理
            contentType: false,//不设置内容类型
            data: form_obj,//发送一个FormData对象

            success: function (response) {
                alert(response)
            }

        })

    });


</script>

views视图中

def file_upload(request):
    if request.is_ajax(): #发 ajax请求
        file_obj=request.FILES.get("img")
        #拿html页面里给的form_obj.append("img", $("[name=‘img‘]")[0].files[0])里面的key值 img
        

     print(file_obj)#是个文件对象 file_name=file_obj.name path=os.path.join(settings.BASE_DIR,"media","img",file_name) with open(path,"wb") as f: for line in file_obj.chunks(): #大文件用chunks方法读 f.write(line)#写入文件 return HttpResponse("上传成功") return render(request,"file_upload.html")

 

ajax 文件上传

标签:请求   end   ase   roc   urlencode   res   写入文件   with open   print   

原文地址:https://www.cnblogs.com/kenD/p/10127207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!