Is it possible to upload one file after another (one file at a time) without page reload?

Hi Experts!

I have a question regarding to the file upload code. It is a simple html upload code:

<form class="smart-form" enctype="multiplart/form-data">
........
<fieldset>
        <section>
            <label class="label">File input</label>
            <div class="input input-file">
                  <span class="button"><input type="file" id="file" name="file" onchange="this.parentNode.nextSibling.value = this.value">Browse</span><input type="text" placeholder="Please upload the file in either .txt or .csv or .xls or .xlsx format" readonly="">
            </div>
      </section>
......
</form>

For my javasxript side I have this code: (I posted the information as $_FILES['Info'] to the PHP)

$('#file').change(function() {
      var file = this.files[0];
      var _formData = new FormData();
      _formData.append('Info', file);

      $.ajax({
            type: "POST",
            url: "App/uploader.php",
            dataType: "text",
            contentType: false,
            processData: false,
            data: file
      }).done(function(data){                   
            //console.log(data);
            var rData = JSON.parse(data);
            switch(rData)
            {
                  case 1:
                        $('#fileMsg ').text("SUCCESS!");
                        setTimeout(function(){location.reload(true);}, 1500);
                        break;
                  case 0:
                        $('#fileMsg ').text("FAILURE!");
                        setTimeout(function(){location.reload(true);}, 2500);
                        break;
            }
      });      
});

My issue is this:

When I use the ajax post and get a result as return I need to use setTimeout(function(){location.reload(true).... in order to upload another file. If I don't reload the page and try to upload another file. I won't get a response.

Is there a way for me to consistantly upload the files without location.reload or I do have to reload due to the nature of the file upload?

Thanks!
Kinderly WadeprogrammerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
All you need to do is trigger the reset on the form after your AJAX response. Easier if you give the form an ID to hook into:

...
}).done(function(data){
    $('#myForm').trigger('reset');
    var rData = JSON.parse(data);

Open in new window

I think you have a slight issue in your code as well - surely data should be _formData, and not file:

processData: false,
data: _formData

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kinderly WadeprogrammerAuthor Commented:
Thanks again Chris for helping me!

You got the _formData part correct. I think when I tried to crop my code from my code editor I must deleted the _formData and placed the false on the wrong line instead. You know exactly what I was talking about. I tried to talk with my co-workers but none of them know what to do but rather saying that I must refresh in order to make it to work. You're awesome!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.