2016-01-13 158 views
1

我目前正在尝试制作一个表单,将多个文件上传到通过下拉列表选择的文件夹。到目前为止,我能够将一个文件上传到预先确定的文件夹(不是下拉列表),但在最近的尝试中,我似乎无法弄清楚通过ajax文件传递给php的问题。任何人都可以帮助我吗?目前代码只刷新我的页面,并不返回任何PHP结果。用ajax将多个文件上传到变量文件夹

我的表格:

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

阿贾克斯:

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

见http://stackoverflow.com/questions/5392344/sending-multipart -formdata-with-jquery-ajax /,http://stackoverflow.com/questions/28856729/uploa d-multiple-image-using-ajax-php-and-jquery/ – guest271314

+0

由于表单提交,您的页面刷新。添加返回false;在ajax调用后点击事件。 –

回答

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