从数组上传 AJAX 图像 [关闭]

Question

我需要有关多重上传表单的帮助。我正在使用 AJAX 上传图像（没有提交按钮）并在图像加载后显示图像。但是，我的表单重复了多次（表格行），因此只有第一个表单有效。我的php代码：

<table class="datatable tablesort selectable paginate full">
                            <thead>
                                <tr>
                                    <th>Part</th>

                                    <th>Price</th>
                                    <th>Upload Image</th>
                                    <th>Categories</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Part</th>
                                    <th>Upload Image</th>
                                    <th>Price</th>
                                    <th>Categories</th>
                                </tr>
                            </tfoot>
                            <tbody>
                            <?php 

 $breaker_id = $_SESSION['breaker_id'];

 $sql = "SELECT * FROM stock where VehicleID='$vehicle' and breaker='$breaker_id'";


$result = mysql_query($sql);

 while ($row = mysql_fetch_assoc($result)) {



?>
                                <tr id="<?php echo $row['id']; ?>" class="edit_tr">
                                    <td class="edit_td"><span id="first_<?php echo $row['id']; ?>" class="text"><?php echo $row['stock_item']; ?></span><input type="text" value="<?php echo $row['stock_item']; ?>" class="editbox" id="first_input_<?php echo $row['id']; ?>"/></td>
                                    <td class="edit_td"><span id="last_<?php echo $row['id']; ?>" class="text">&pound;<?php echo $row['price']; ?></span><input type="text" value="<?php echo $row['price']; ?>" class="editbox" id="last_input_<?php echo $row['id']; ?>"/></td>
                                    <td>
                                    <div class='preview'>
</div>
                                  <form class="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image 
<div class='imageloadstatus' style='display:none'><img src="images/load.gif" alt="Uploading...."/></div>
<div class='imageloadbutton' >
<input type="file" name="photoimg" class="photoimg" />
<input type="text" name="photoimgid" value="<?php echo $row['id']; ?>">
</div>
</form>
 <td><?php echo $row['Item_Specifics_Type']; ?> | <?php echo $row['Item_Specifics_SubType']; ?>           </td>
                                </tr><?php } ?>
                            </tbody>
                        </table>

还有javascript：

<script type="text/javascript" >
 $(document).ready(function() { 

        $('.photoimg').die('click').live('change', function()           { 
                   //$("#preview").html('');

            $(".imageform").ajaxForm({target: '.preview', 
                 beforeSubmit:function(){ 

                console.log('v');
                $(".imageloadstatus").show();
                 $(".imageloadbutton").hide();
                 }, 
                success:function(){ 
                console.log('z');
                 $(".imageloadstatus").hide();
                 $(".imageloadbutton").show();
                }, 
                error:function(){ 
                        console.log('d');
                 $(".imageloadstatus").hide();
                $(".imageloadbutton").show();
                } }).submit();


        });
    }); 
</script>

Answer 1

您使用了重复的 ID。每次搜索（在 jQuery 中）e.q. #imageform 或 #preview 它返回它找到的第一个具有此 ID 的元素！

$("#imageform").ajaxForm({ // Wrong, catch only first #imageform
$(".imageform").ajaxForm({ // Correct, loop over all elements with .imageform class

你必须在整个 JS 代码中更改它。

-- 编辑--

现在您为每个 .imageform 运行 ajaxForm 插件，但目标在每次执行以及 beforeSubmit、成功和错误函数中的切换元素中都是相同的。

$('.photoimg').die('click').live('change', function () {
    var id = $(this).closest('tr').attr('id');
    $(this).closest(".imageform").ajaxForm({
        target: '#' + id + ' .preview', // type of hack, don't have plugin source ;)
        beforeSubmit: function () {
            console.log('v');
            $(this).find(".imageloadstatus").show();
            $(this).find(".imageloadbutton").hide();
        },
        success: function () {
            console.log('z');
            $(this).find(".imageloadstatus").hide();
            $(this).find(".imageloadbutton").show();
        },
        error: function () {
            console.log('d');
            $(this).find(".imageloadstatus").hide();
            $(this).find(".imageloadbutton").show();
        }
    }).submit();
});