AJAX Image Upload from an array

Question

I need some help with a multiple upload form. I'm using AJAX to upload an image (without a submit button) and display the image after it has loaded. However, my form is repeated multiple times (table rows) so that only the first form works. My php code:

<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>

And the 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>

possible duplicate of [JQuery AJAX sending files array from form](http://stackoverflow.com/questions/8991731/jquery-ajax-sending-files-array-from-form) — toesslab, Sep 24 '14 at 12:59

Wojciech Mleczek · Accepted Answer · 2014-09-24T11:35:42.247

0

You use duplicated id's. Every time you search (in jQuery) e.q. #imageform or #preview it returns the first element that it found with this id!

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

You have to change it in whole JS code.

-- edit --

Now you run ajaxForm plugin for every .imageform but target is the same in every execution as well as toggled elements in beforeSubmit, success and error functions.

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

edited Sep 24 '14 at 11:35

answered Sep 23 '14 at 16:11

Wojciech Mleczek

1,574
15
18

I've changed all my id's to classes and changed the # to . but it still only works for the initial element – tomantford Sep 24 '14 at 09:38
Please update the first post – Wojciech Mleczek Sep 24 '14 at 09:56
Thanks @r4xz, I've made the changes suggested, but still only the first row works as the "trigger" for the image upload – tomantford Sep 24 '14 at 15:10
1

http://jsfiddle.net/96brk9qs/ - looks fine. Could you give some logs (php/js)? – Wojciech Mleczek Sep 24 '14 at 16:17
Yes that works fine now @r4xz - However, when posting the form it doesn't pick out the value from When uploading the image to the database I run $sql = "UPDATE stock SET image='$actual_image_name' WHERE id='$id'"; (where $id = $_POST['photoimgid']; ) – tomantford Sep 25 '14 at 09:05

AJAX Image Upload from an array

1 Answers1