upload multiple files to variable folder with ajax

Question

I am currently trying to make a form that uploads multiple files to a folder that is chosen through a drop down list. So far I was able to upload one file to a folder that was predetermined(not the drop down list), but in my most recent attempt I cannot seem to figure out what is wrong with the communication to the ajax file to the php. Would anyone be able to help me out? Currently the code just refreshes my page and does not return any php results.

My Form:

<form  method="post" id="form" enctype="multipart/form-data" >
              <p>
                <input type="file" name="file" id="file" onclick="zero_damnit()" onchange="bars()"  multiple></input>
              </p>
          </div>
        </div>
      </div>
      <a class="bar_font">Files</a>
      <div class="progress_bar meter super_center nostripes">
        <span id="load" ></span>
      </div>
      <a class="bar_font">Size</a>
      <div class="progress_bar meter super_center nostripes">
        <span id="size"></span>
   <div class="dropdown_section">
            <a class="bar_font">Category</a>
            <select name="folder" id="drop_category">
              <option value="empty">empty</option>
              <option value="bass">bass</option>
              <option value="clap">clap</option>
              <option value="hi-hat">hi-hat</option>
              <option value="kick">kick</option>
              <option value="lead">lead</option>
              <option value="perc">perc</option>
              <option value="sfx">sfx</option>
              <option value="snare">snare</option>
              <option value="synth">synth</option>
              <option value="vocal">vocal</option>
              <option value="loop">loop</option>
              <option value="other">other</option>
            </select>
          <br>
            </div>
<!-- terms -->
        <div class="checkbox_upload" id="saber">
          <input type="checkbox" onclick="changeClass()"  name="terms" id="terms"> I accept the <a class="link-style" href="terms.html">Terms and Conditions.</a>
        </div>
        <div class="shift meterslim super_center nostripes">
        <span style="width: 50%"></span>
      </div>

      </div>
    </div>
        <div class='center super_center'>
          <input type="submit" name="submit" id="submit" class="button_before submit">
        </div>
        <div id="results">
        </div>
      </div>
</form>

php:

<?php
$folder = $_POST['folder'];
// sanitise $folder
$location = 'uploaded/' . rtrim($folder, '/') . '/' . $_FILES['file']['name'];
if(file_exists($location)) {
    echo 'File already exists';
}
else {
    move_uploaded_file($_FILES['file']['tmp_name'],  $location);
    echo true;
    echo 'File was stored in:' . $location;
}
?>

Ajax:

$('#submit').on('click', function() {
    var folder = $('input#drop_category').val();
    var file_data = $('#file').prop('files')[0];     
    var form_data = new FormData();                  
    form_data.append('files', file_data, 'folder',folder);
    alert(form_data);                             
    $.ajax({
                url: 'upload.php', // point to server-side PHP script 
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                success: function(php_script_response){
                    alert(php_script_response); // display response from the PHP script, if any
                }
     });
});

See http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax/ , http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/ — guest271314, Jan 13 '16 at 00:36
Your page refreshes because of form submission. Add return false; inside click event after ajax call. — Jaya Vishwakarma, Jan 13 '16 at 01:45

score 0 · Answer 1 · answered Jan 13 '16 at 02:12

0

$('#submit').on('click', function(e) { // add 'e' on the function
  e.preventDefault(); // add this line to prevent the php form submission, so it won't refresh the page

answered Jan 13 '16 at 02:12

momouu

711
4
14

upload multiple files to variable folder with ajax

1 Answers1