php - 通过 Javascript 进行多图像选择的 HTML 表单

Question

我正在构建一个 HTML 表单，用户可以选择一个图像、一个 url 和一个文本，这些文本将添加为 <li>进入网页。我的问题是我希望用户能够创建多个 <li>每个输入，我认为最简单的方法是将值分配到数组中，但这会给我带来以下问题......

图像是通过打开文件浏览器窗口(确切地说是elfinder)的按钮选择的，该窗口是通过javascript操作的，我不知道如何让它在每个不同的<li>上添加图像。 。 这是 JavaScript:

<div class="picture">
    <span>No picture?Use the browse button to select one!</span>
</div>
<input type="text" class="featured_image" placeholder="Featured Image" name="featured_image[]" hidden="true">
<input type="button" value="Browse" class="imageUpload" ></li>
<script type="text/javascript"> 
    $('.imageUpload').popupWindow({ 
        windowURL:'elfinder/alone_elfinder.html?mode=image', 
        windowName:'Filebrowser',
        height:490, 
        width:950,
        centerScreen:1
    }); 
    function processFile(file) {
        $('.picture').html('<img src="' + file + '" />');
        $('.featured_image').val(file);
    }
</script>

我尝试在网络上搜索，但这就是我对工作代码的了解。至少我相信我已经弄清楚了 php，所以问题主要是如何使数组在 javascript 中工作。 提前致谢。

编辑:

我改变了形式，它看起来像这样:

<div class="slide" id="slide1">
    <input type="button" value="Browse" class="imageUpload">
    <div class="picture">
                <span>No picture?Use the browse button to select one!</span>
    </div>
    <input type="hidden" class="featured_image" placeholder="Featured Image" name="featured_image[]">
</div>
<div class="slide" id="slide2">
    <input type="button" value="Browse" class="imageUpload" >
    <div class="picture">
                <span>No picture?Use the browse button to select one!</span>
    </div>
    <input type="hidden" class="featured_image" placeholder="Featured Image" name="featured_image[]">
</div>

<script type="text/javascript"> 
    $('.imageUpload').popupWindow({ 
            windowURL:'elfinder/alone_elfinder.html?mode=image', 
            windowName:'Filebrowser',
            height:490, 
            width:950,
            centerScreen:1
    }); 
    function processFile(file){
        $(this).parent("div").children(".picture").html('<img src="' + file + '" />');
    }
</script>

但是 ofc 它不起作用，因为 $(this).parent("div").children(".picture")目标是文件而不是按钮。 我可以让它以某种方式瞄准按钮吗？

Answer 1

这非常有帮助，我最终这样做了:

<script type="text/javascript"> 

$(function() {  
    $('.imageUpload').click(function() {
        $(".active-slide").removeClass("active-slide");
        $(this).parent("p").addClass("active-slide")
    });


    $('.imageUpload').popupWindow({ 
        windowURL:'/elfinder/elfinder_popup.php', 
        windowName:'Filebrowser',
        height:490, 
        width:950,
        centerScreen:1
    });
});  
function processFile(file){
    $(".active-slide").children(".picture").html('<img src="' + file + '" />');
    $(".active-slide").children(".xFilePath").val(file);
    $(".active-slide").removeClass("active-slide");

}

<p>
<span class="picture"></span><br />
Image 1 <input type="text" class="xFilePath" id="xFilePath1" name="FilePath1" size="70"/><input type="button" value="Browse Server" class="imageUpload"/><br />
Image 1 Caption Overlay: <input type="text" id="xFileText1" name="FileText1" size="100"/> </p>



<p>
 <span class="picture"></span><br />
Image 2 <input type="text" class="xFilePath" id="xFilePath2" name="FilePath2" size="70"/><input type="button" value="Browse Server" class="imageUpload"/><br />
Image 2 Caption Overlay: <input type="text" id="xFileText2" name="FileText2" size="100"/> </p>



<p>
 <span class="picture"></span><br />
Image 3 <input type="text" class="xFilePath" id="xFilePath3" name="FilePath3" size="70"/><input type="button" value="Browse Server" class="imageUpload" /><br />
Image 3 Caption Overlay: <input type="text" id="xFileText3" name="FileText3" size="100"/> </p>

<p>
 <span class="picture"></span><br />
Image 4 <input type="text" class="xFilePath" id="xFilePath4" name="FilePath4" size="70"/><input type="button" value="Browse Server" class="imageUpload" /><br />
Image 4 Caption Overlay: <input type="text" id="xFileText4" name="FileText4" size="100"/> </p>

<p>
 <span class="picture"></span><br />
Image 5 <input type="text" class="xFilePath" id="xFilePath5" name="FilePath5" size="70"/><input type="button" value="Browse Server" class="imageUpload" /><br />
Image 5 Caption Overlay: <input type="text" id="xFileText5" name="FileText5" size="100"/> </p>