Javascript 使用ajax将多个文件上载到变量文件夹

我目前正在尝试制作一个表单，将多个文件上传到通过下拉列表选择的文件夹中。到目前为止，我能够将一个文件上传到预先确定的文件夹（不是下拉列表），但在我最近的尝试中，我似乎无法找出ajax文件与php之间的通信有什么问题。有人能帮我吗？目前，代码只是刷新我的页面，不返回任何php结果

我的表格：

<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>

---

请参见，您的页面因表单提交而刷新。添加返回假；ajax调用后的inside click事件。请参阅，由于表单提交，您的页面将刷新。添加返回假；ajax调用后的内部单击事件。

<?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;
}
?> 

$('#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
                }
     });
});

$('#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