javascript - 除了第一个循环之外，文件上传不会在以下循环中触发

Question

我正在为我的 Web 应用程序使用 Twitter Modal Bootstrap。该应用程序的功能之一是显示包含相应信息的表格(我使用 mysql_query 来填充信息)。表的每一行都有一个“查看”按钮。单击该 View 按钮将打开一个“模态”弹出窗口，其中包含一个表单。如您所见，我正在尝试使用 AJAX 上传文件。当我尝试在第一行执行此操作时，此操作已成功完成。但是当我尝试在下一行执行此操作时，我无法上传文件，就好像其中没有表单一样。

表:

<table border = '1' width = "30%">
    <tr>
        <th>Asset Picture</th>
        <th>Asset Name</th>
        <th>Action</th>
    </tr>
    <?php
    $data=mysql_query("SELECT * FROM assets") or die("No records found.".mysql_error());
    while($row = mysql_fetch_array($data))
    {
        echo "<tr>
                  <td><img src = '$row[asset_Picture]' width = '100%'></td>
                  <td>$row[asset_Name]></td>
                  <td><button data-toggle='modal' id = 'buttonView' style = '$row[asset_ID]' data-target='#myModalEdit-$row['asset_ID']' type='button' class='btn btn-link'>View</button></td>
              </tr>";
        echo "<div class='modal fade' id='myModalEdit-$row['asset_ID']' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>"; ?>
            <div class='modal-dialog'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
                        <h4 class='modal-title' id='myModalLabel'><b>Testing</b></h4>
                    </div>
                    <div class='modal-body'>
                    <?php
                    echo    "<form style = '$row[asset_ID]' id='uploadForm-$row[asset_ID]' action = 'upload.php' method = 'POST'>
                            <center><img value = '$row[asset_Picture]' id = asset_Picture-$row[asset_ID]' class = 'img-thumbnail' src = '$row[asset_Picture]' width = '60%'></center><br><br>
                            <b class = 'text-danger'>Change Asset Picture?</b><br><br>
                            <input class = 'form-controlModal' type = 'file' name = 'userImage' id = 'file-$row[asset_ID]' accept='image/x-png, image/gif, image/jpeg, image/pjpeg, image/jpg, image/png' style = 'width:460px;'>
                            <input type='submit' id = 'uploadPicture' style = '$row[asset_ID]' class='btn btn-primary' value = 'Upload'>
                            </form>";
                    ?>
                    </div>
                    <div align = 'left' class='modal-footer'>
                        <button type='button' class='btn btn-warning' data-dismiss='modal'>Close</button>
                    </div>
                </div>
            </div>
        </div>
    <?php
    }
    ?>
</table>

Javascript:

$('#uploadPicture').click( function(e) {
    var edit_id = $(this).attr("style");
    $.ajax({
        url: "upload.php",
        type: "POST",
        data:  new FormData($("form#uploadForm-"+edit_id)[0]),
        contentType: false,
        cache: false,
        processData:false,   
        success: function(data)
        {
            alert("success!");
        },
        error: function() 
        {
        }
   });
    e.preventDefault();
});

上传.php

<?php
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = "upload/".$_FILES['userImage']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
echo $targetPath;
}
}
}
?>

提前致谢! :)

Answer 1

不要使用“id”，而使用“class”。使用“id”绑定(bind)仅适用于第一个元素。偶数仅与第一个命中该偶数的 ID 绑定(bind)。而是使用

<input type='submit' style = '$row[asset_ID]' class='uploadPicture btn btn-primary' value = 'Upload'>

现在像这样修改脚本

$('.uploadPicture').click( function(e) { // <-- starting with '.' means for all objects of this class
var edit_id = $(this).attr("style");
$.ajax({
    url: "upload.php",
    type: "POST",
    data:  new FormData($("form#uploadForm-"+edit_id)[0]),
    contentType: false,
    cache: false,
    processData:false,   
    success: function(data)
    {
        alert("success!");
    },
    error: function() 
    {
    }
    });
    e.preventDefault();
});

这应该可以解决问题。如果您想采纳我的建议，那么我想说在“style”属性中使用 ID 确实是个坏主意。我想说像这样使用它

<input type='submit' id = '$row[asset_ID]' class='uploadPicture btn btn-primary' value = 'Upload'>

并在脚本中识别它，例如

$('.uploadPicture').click( function(e) {
var edit_id = $(this).attr("id"); // <------ pick from id
$.ajax({
    url: "upload.php",
    type: "POST",
    data:  new FormData($("form#uploadForm-"+edit_id)[0]),
    contentType: false,
    cache: false,
    processData:false,   
    success: function(data)
    {
        alert("success!");
    },
    error: function() 
    {
    }
    });
    e.preventDefault();
  });