Django之上传文件

还记得Ajax的三种请求发送方式吗?(原生Ajax,jquery,伪Ajax)

上传文件也是一样的,同样是这三种方法。

 

首先先创建一个表单,用于上传文件

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .upload{
       
            position: absolute;
            display: inline-block;
            background-color: darkcyan;
            text-align: center;
            line-height: 35px;
            top: 0px;
            right: 0px;
            left: 0px;
            bottom: 0px;
            z-index:10;
        }
        .file{
       
            position: absolute;
            opacity: 0;
            z-index: 20;
              top: 0px;
            right: 0px;
            left: 0px;
            bottom: 0px;
        }
    style>
head>
<body>
    <div style="width: 70px;height: 35px; background-color: cadetblue; position: relative;">
        <input class="file" type="file" id="f" name="file">
        <a class="upload">上传a>
    div>
    <input type="button" value="提交XHR" onclick="xhrSubmit()"/>
    <input type="button" value="提交ajax" onclick="jqSubmit()"/>
    <div id="ifbd">
        <form action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifml">
            <iframe id="ifram" name="ifml">iframe>
            <input type="file" name="file"/>
            <input type="submit" value="on" onclick="iframeSubmit()"/>
        form>
    div>
body>
View Code

代码中为了界面美观而加了一些样式,可以不必理会。

注意代码中的submit标签分别对应不同的onclick事件,分别对应着不同的请求方法,代码如下。

接下来我们就可以选择不同的方法来发送表单:

1.原生Ajax:

  基于XMLHttpResponse(xhr)发送请求

<script>
        function xhrSubmit() {
            //jquery对象【0】索引代表dom对象
            var file_obj=$('#f')[0].files[0];//文件就这样获取
            var formdata=new FormData();
            formdata.append('file',file_obj);//add方法,前面是key,后面是value,可以加普通字符串,也可以是特殊对象
            formdata.append('username','root');
            var xhr=new XMLHttpRequest();
            xhr.open('POST','/upload_file/',true);
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4){
                    var obj=JSON.parse(xhr.responseText);
                    console.log(obj.data);
                    var tag=document.createElement('img');
                    tag.src='/'+obj.data;
                    $("#preview").append(tag);
                }
            };
            xhr.send(formdata)
        }
script>

2.jQuery:

  通过jQuery中的Ajax方法来发送,本质上和xhr是一样的,只不过是jQuery对其做了封装

<script>
    function jqSubmit() {
            var file_obj=$('#f')[0].files[0];//文件就这样获取
            var formdata=new FormData();
            formdata.append('file',file_obj);//add方法,前面是key,后面是value,可以加普通字符串,也可以是特殊对象
            formdata.append('username','root');
            $.ajax({
                url:'/upload_file/',
                type:'POST',
                data:formdata,
                //这里需要加两个参数来做特殊处理
                processData:false,
                contentType:false,
                success:function (arg,a1,a2) {
                    console.log(arg)
                    console.log(a1)
                    console.log(a2)
                }
            })
        }
script>

3.iframe方式提交(重要!)

<script>
    function iframeSubmit() {
            $('#ifram').load(function () {
                $('#preview').empty();
                var text=$('#ifram').contents().find('body').text();
                var obj=JSON.parse(text);
                console.log(obj);
                var tag=document.createElement('img');
                tag.src='/'+obj.data;
                $('#preview').append(tag);
            })
        }
script>

为什么这种方式是重要的?因为那些坑爹的IE浏览器会对xhr产生抗拒,也就是兼容问题,但是这种方式几乎所有的浏览器都适用,几乎没有什么兼容性的问题,

因此上传文件的话iframe方式推荐首选。

最后,到了我们的后台接受文件的时候了,虽然前端提交的时候花样挺多,但不管你用那种方式,我后端服务器也只管收就是了

def upload(request):
    return render(request,'upload.html')

def upload_file(request):
    import json,os
    file=request.FILES.get('file')
    upload_path=os.path.join('static/upload',file.name)
    with open(upload_path,'wb') as wenjian:
        for i in file.chunks():
            wenjian.write(i)
    ret={
     'code':True,'data':upload_path}
    dic={
        'error':0,
        'url':upload_path,
        'messige':'invalid...'
    }
    print(json.dumps(ret))
    return HttpResponse(json.dumps(dic))

这里是将接受过来的文件存到了static/upload文件中,并以原文件命名:

upload_path=os.path.join('static/upload',file.name)

这样就成功的将文件上传至服务器端了。

 

  

转载于:https://www.cnblogs.com/SunsetSunrise/p/7795276.html

你可能感兴趣的:(python,json,javascript)