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，success和error函数中的切换元素。

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

AJAX图像从数组上传

1 个答案: