javascript - 使用PHP循环文件上传表单

Question

我目前正在使用 jquery 小册子 Moleskine Notebook with jQuery Booklet制作一个日志，其中包含要为每一页上传的一些图像。我正在做的是循环 php 中每个页面的 div，因为我从 DB 调用数据，但是当我尝试如下使用文件上传表单时，它只适用于第一页。上传按钮出现在每个其他页面上，但它什么也没做，甚至没有调用上传窗口。

每个页面都有自己的 log_id $row['log_id']。

因此非常感谢任何解决方案。

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));
}

这里是调用表单的脚本

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

如果您使用的是 id $('#upload_form').ajaxForm({***});。这只会找到并定位第一个 #upload_form

如果您使用的是 $('.upload_form').ajaxForm({***}); 这样的类。这将找到并定位 all 表单类 .upload_form

您需要定义要查找的表单。在这种情况下，您只需要找到最接近/父级的 .upload-images 形式。如下所示。

这样做。

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