Как отправить переменную с помощью Ajax?

Question

Я пытаюсь загрузить файлы с Ajax & PHP, но проблема в том, что я не могу отправить текст типа ввода, который содержит идентификатор папки.

Вот мой HTML:

<form method="post" enctype="multipart/form-data" action="uploadify.php"> 
     <input type="file" name="images" id="images" multiple /> 
     <input type="hidden" name="eid" value="<?php echo $eid;?>" /> 
     <input type="btn submit" id="btn" value="Upload" /> 
     </form> 

    <div id="response"></div> 
    <ul id="image-list"> 

    </ul> 

Вот мой JavaScript:

(function() { 
    var input = document.getElementById("images"), 
     formdata = false; 

    function showUploadedItem (source) { 
     var list = document.getElementById("image-list"), 
      li = document.createElement("li"), 
      img = document.createElement("img"); 
     img.src = source; 
     li.appendChild(img); 
     list.appendChild(li); 
    } 

    if (window.FormData) { 
     formdata = new FormData(); 
     document.getElementById("btn").style.display = "none"; 
    } 

    input.addEventListener("change", function (evt) { 
     document.getElementById("response").innerHTML = "Uploading . . ." 
     var i = 0, len = this.files.length, img, reader, file; 

     for (; i < len; i++) { 
      file = this.files[i]; 

      if (!!file.type.match(/image.*/)) { 
       if (window.FileReader) { 
        reader = new FileReader(); 
        reader.onloadend = function (e) { 
         showUploadedItem(e.target.result, file.fileName); 
        }; 
        reader.readAsDataURL(file); 
       } 
       if (formdata) { 
        formdata.append("images[]", file); 
       } 
      } 
     } 

     if (formdata) { 
      $.ajax({ 
       url: "uploadify.php", 
       type: "POST", 
       data: formdata, 
       processData: false, 
       contentType: false, 
       success: function (res) { 
        document.getElementById("response").innerHTML = res; 
       } 
      }); 
     } 
    }, false); 
}()); 

А вот мой PHP:

<?php 
//upload.php 
$eid = $_POST['eid']; 
$output_dir = "./images/icons/".$eid."/screenshots/"; 
if (!file_exists($output_dir) and !is_dir($output_dir)) { 
    mkdir($output_dir); 
} 


foreach ($_FILES["images"]["error"] as $key => $error) { 
    if ($error == UPLOAD_ERR_OK) { 
     $name = $_FILES["images"]["name"][$key]; 
     move_uploaded_file($_FILES["images"]["tmp_name"][$key], "$output_dir" . $_FILES['images']['name'][$key]); 
    } 
} 


echo "<h2>Successfully Uploaded Images $eid</h2>"; 

То, что я хочу сделать то, что я отправка типа ввода скрытого имени = eid, но не знаю, что не так, почему я не могу отправить это через мою функцию JS?

Answer 1

"The only thing missing is that i am unable to send that eid field . [...] If i will be able to post that field with this function my gallery will be completed" 

Дайте поле ввода идентификатор, принеси идентификатор из формы, и для этого вы можете получить значение, соответствующее идентификатору:

<input id='theEIdGuy' type="hidden" name="eid" value="<?php echo $eid;?>" /> 

Так что, если мы имели PHP (после отправки формы) мы мог бы получить его таким образом, теперь это возможно, потому что ожидается, что значение будет идентифицироваться идентификатором (id), а не именем.

$eid = isset($_POST['theEIdGuy']) ? $_POST['theEIdGuy'] : "It's not set :("; 

используя ternary operator.

Использование сырой JavaScript вы можете получить его, как это (но вы не должны, если вам это нужно только в PHP):

var theEIdGuy = document.getElementById('theEIdGuy').value; 

Использование JQuery вы можете получить так:

var theEIDGuy = $('#theEIdGuy').val(); 

Answer 2

в эти дни я столкнулся с таким же вопросом ... решением является более простым, как вы можете себе представить :)

изменения этого:

if (formdata) { 
        formdata.append("images[]", file); 
       } 

с:

if (formdata) { 
var variable_eid = document.getElementById("eid"); 
        formdata.append("images[]", file); 
        formdata.append("eid", variable_eid); 
       } 

Для меня это более простой в использовании Jquery/Ajax .. есть меньше кодирования и чистый. Я попытался быстро настроить его для ваших нужд ...

$(document).ready(function() { 
$('#images').change(function(){ 
var variable_eid = $('#eid').val(); 
var data; 
data = new FormData(); 
data.append('images', $('#file')[0].files[0]); 
data.append('eid', variable_eid); 
$.ajax({ 
     url: 'uploadify.php', 
     data:data, 
     processData: false, 
     contentType: false, 
     type: 'POST', 
     success: function (data) { 
      $('#response').html(data); 
     } 
     }); 
    }); 
     });