Form form and Ajax upload file of Django framework

Browse the catalog

• Form upload file

• Ajax upload file

• Fake Ajax upload file

 

Form upload file

html

<h3>form upload file</h3>


<form action="/upload_file/" method="post" enctype="multipart/form-data">
    <p><input type="file" name="upload_file_form"></p>
    <input type="submit">
</form>

Note: The enctype="multipart/form-data attribute must be added.

view

def index(request):

    return render(request,"index.html")


def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("Upload successful!")　

Ajax upload file

What is FormData

XMLHttpRequest Level 2 adds a new interface FormData. Using FormData对象JavaScript, we can use some key-value pairs to simulate a series of form controls, and we can also use the XMLHttpRequest send()method to submit this "form" asynchronously. Compared with ordinary ajax, The biggest advantage of using FormDatait is that we can upload a binary file asynchronously.

Newer versions of all major browsers already support this object, such as Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 5+.

html

<h3>Ajax upload file</h3>

<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>

<button id="upload_button">提交</button>
{#Note that the button tag should not be used in the form form#}

<script>
    $("#upload_button").click(function(){

        var username=$("#username").val();
        var upload_file=$("#upload_file_ajax")[0].files[0];

        var formData=new FormData();
        formData.append("username",username);
        formData.append("upload_file_ajax",upload_file);


        $.ajax({
            url:"/upload_file/",
            type:"POST",
            data:formData,
            contentType:false,
            processData:false,

            success:function(){
                alert("Upload successful!")
            }
        });


    })
</script>

　Note: contentType: false, processData: false, are essential.

views.py　

def index(request):
  
    return render(request,"index.html")
  
  
def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("Upload successful!")　

Fake Ajax upload file

iframe tag

The <iframe> tag specifies an iframe.

An iframe is used to embed another document within the current HTML document.

Example:

<iframe src="http://www.baidu.com" width="1000px" height="600px"></iframe>　　

iframe+form

<h3>Forgery Ajax upload file</h3>
<form action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data">
    <p>
        <iframe name="ifr" id="ifr"></iframe></p>
    <p><input type="file" name="upload_file"></p>
    <p><input type="text" name="user"></p>

    <input type="button" value="提交" id="submitBtn">
</form>

<script>



    $("#submitBtn").click(function(){

        $("#ifr").load(iframeLoaded);
        $("#form2").submit();


    });

    function iframeLoaded(){
        alert(123)
    }

</script>　　

views

def index(request):
 
    return render(request,"index.html")
 
def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("Upload successful!")