locked
Uploading files; jQuery RRS feed

  • Question

  • User895691971 posted

    Hi, I am using the following code to upload files to the server, but it doesnot send any file to server, however the alert is shown saying Upload Complete. 

    Following is my code:

    $('#submit').click(function () {
       var formData = $('form').serialize();
       // var images = $('#image')[0].files[0];
       // formData.append('image', image);
          $.ajax({
          url: '/test/file_capture',  //Server script to process data
          // type: 'POST',
          /* xhr: function () {  // Custom XMLHttpRequest
               var myXhr = $.ajaxSettings.xhr();
               if (myXhr.upload) { // Check if upload property exists
                   myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                   // For handling the progress of the upload
               }
               return myXhr;
               }, */
               //Ajax events
               beforeSend: function (e) { alert('Are you sure you want to upload document.'); },
               success: function (e) { alert('Upload completed'); },
               error: function (e) { alert('error' + e.message); },
               // Form data
               data: formData,
               //Options to tell jQuery not to process data or worry about content-type.
               cache: false,
               contentType: false,
               processData: false
               });
           return false;
    });

    Here is the HTML part. 

    <form enctype="multipart/form-data">
       <input type="text" name="something" value="image" />
       <input type="file" id="image" name="image" accept="Image/*" />
       <input type="submit" id="submit" name="" value="Upload" />
    </form>

    The issue is that the link that is created is as: http://localhost:4965/test/file_capture?__RequestVerificationToken=XWX2QlxSSLVrZfLyc5cOzeVfbypYlzbZVbI6tUAj7vwfVu3TYYwwmGv8yEkn2ZAyel3PjubsWByq-ZZkbid9vwc5hWqTqhUwPrYZsVQD7eywBnnUmCs3F1u9CBKgWEIE0QvcAHhXpxusDIqbRTMlWYVBFVppMutCCFETJ2fMhgYBZWccbIe-fmKkXvDGNvvQ0&something=image&_=1386504173375

    And if I use 

    var formData = new FormData($(this).form);

    Then the link doesnot contain the RequestVerificationToken thing, as is as: http://localhost:4965/test/file_capture?[object%20FormData]&_=1386504293813

    What is wrong here? 

    Sunday, December 8, 2013 7:05 AM

Answers

  • User895691971 posted

    The problem as the URL is showing was that 2 years ago I was using this code to send the file to the servers, however, it was not POST request, instead a GET method (default one). Which is why all of the form content was being shared in the URL itself. 

    Later, recently I had created the plugin to actually publish the file using jQuery Ajax. I also wrote an article plus an answer on this forum and I'd like to share that for upcoming readers and viewers, https://forums.asp.net/p/2096957/6058296.aspx. Feel free to share the source code in your own applications and for the users!

    Happy coding. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 3, 2016 6:23 PM

All replies