Home Html 5 upload file , ajax , jquery
Reply: 1

Html 5 upload file , ajax , jquery

andrew
1#
andrew Published in 2018-01-12 23:22:01Z

I am trying to upload file via jquery, so what I want to do is using the ajax POST method and post the uploaded file to url:"/files/uploads" with the parameter file ,so I have this input

<form id="fileUploadForm">
    <label class="btn-bs-file btnAddFile btn btn-lg btn-primary">
          <span class="fa fa-plus"></span>
              <span>Add New File</span>
                  <input type="file" id="fileInputUpload" />
                  <input type="submit" value="Submit" id="btnSubmit"/>
     </label>
</form> 

and this is how i try to post into server

$("#btnSubmit").click(function (event) {

        //stop submit the form, we will post it manually.
        event.preventDefault();

        // Get form
        var form = $('#fileUploadForm')[0];

        // Create an FormData object
        var file = new FormData(form);
        // If you want to add an extra field for the FormData
        file.append("CustomField", "This is some extra data, testing");

        // disabled the submit button
        $("#btnSubmit").prop("disabled", true);

        $.ajax({
            type: "POST",
            url: "/files/uploads",
            data: {file:file},
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (data) {


            },
            error: function (e) {


            }
        });

    });
Barmar
2#
Barmar Reply to 2018-01-14 14:59:00Z

This line is wrong:

data: {file:file},

it should be:

data: file,

Also, you need to give a name to the file input, it should be:

<input type="file" name="file" id="fileInputUpload">
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305242 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO