从数组上传AJAX图像

AJAX Image Upload from an array

本文关键字：AJAX 图像数组更新时间：2023-09-26

我需要一些关于多重上传表单的帮助。我使用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>

您使用重复的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();
});