-基于ajax上传文件

基于ajax上传文件

    $("#but").click(function () {
        var files = $("#file")[0].files[0]  //拿到上传文件
        var formdata = new FormData()     //生成一个FormData对象
        formdata.append("myfiles",files)   //放文件

        $.ajax({ 
            url:"up_file",   
            type:"post",        //请求类型
            processData:false,    //不预处理数据  因为FormData 已经做了
            contentType:false,        //我不指定编码了 因为FormData 已经做了
            data:formdata,

            success:function (data) {
                $("#suc").text(data)
            }
        })
    })
    -后台在requet.FILE字典中取出

详细版:

ajax上传文件:
    前端:
        $("#filebtn").click(function () {
            //js取到文件
            var myfile = $("#id_myfile")[0].files[0]
            //生成一个FormData对象
            var formdata = new FormData()
            //放值
            formdata.append('name', $("#id_name").val())
            //放文件
            formdata.append('myfile', myfile)
            $.ajax({
                url: '/fileupload/',
                type: 'post',
                //这两个要必须写
                processData:false,  //不预处理数据  因为FormData 已经做了
                contentType:false,  //我不指定编码了 因为FormData 已经做了

                data: formdata,
                success: function (data) {
                    console.log(data)
                }
            })
        })
    后台:
        def fileupload(request):
            print(request.POST.get('name'))
            # 文件对象
            myfile=request.FILES.get('myfile')
            with open(myfile.name,'wb') as f:
                for line in myfile:
                    f.write(line)
            return HttpResponse('上传成功')

ajax执行成功后跳转到另一个页面吗:

    $("#but").click(function () {
        $.ajax({
            url:"/login/",
            type:"post",
            data:{name:$("#user").val(),
                pwd:$("#pwd").val()
            },

            success:function (data) {
                 window.location.href=data  #核心是这句
                 {#window.location.href="/pages1/"#}
            }
        })
    })

 

posted @ 2019-01-19 10:01  萤huo虫  阅读(139)  评论(0)    收藏  举报