用PHP循环文件上传表单

Question

im currently using jquery booklet Moleskine Notebook with jQuery Booklet to make a logbook with some images to be uploaded for every page. what im doing is im looping the div of every page in php as im calling data from DB, but when i tried to use file upload form as follows , it only works on first page on. the upload button appeared on every other page but it does nothing, not even call the upload window.

every page has its own log_id $row['log_id'] .

so any solution is much appreciated.

if (mysqli_multi_query($conn, $sql)) {
 do {
  if ($result = mysqli_store_result($conn)) {
    while ($row = mysqli_fetch_array($result)){

echo '<div>';
echo '    <form method="post" name="upload_form" id="upload_form" enctype="multipart/form-data" action="php/multiple_upload.php">';
echo '      <input type="hidden" name="form_submit" value="1"/>';
echo '      <input type="file" class="hidden" name="images[]" id="upload-images" multiple >';
echo '      <input name="log_id" type="hidden" value="'.$row['log_id'].'">' ;
echo '    </form>'; 
echo '</div>' ; 
            }
        mysqli_free_result($result);
        }   
    } while (mysqli_next_result($conn));
}

and the here is the script for calling form

$(document).ready(function(){
$('#upload-images').on('change',function(){
    $('#upload_form').ajaxForm({
        beforeSubmit:function(e){
            $('.progress').show();
        },
        success:function(e){
            $('.progress').hide();

                location.reload(true);              
        },
        error:function(e){

            }
        }).submit();
    });
});

Answer 1

If you're using id $('#upload_form').ajaxForm({***}); . This will only find and target the first #upload_form

And if you're using class like $('.upload_form').ajaxForm({***}); . This will find and target all the form class .upload_form

You need to define which form you're looking for. In this case, You just need to find the closest/parent of .upload-images form. Like below.

Do like this.

$(document).ready(function(){
$('.upload-images').on('change',function(){
    $(this).closest('form').ajaxForm({ // target the parent form
        beforeSubmit:function(e){
            $('.progress').show();
        },
        success:function(e){
            $('.progress').hide();

                location.reload(true);              
        },
        error:function(e){

            }
        }).submit();
    });
});