1

我正在构建一个 HTML 表单，让用户选择一个图像、一个 url 和一个将作为 a 添加<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")目标是文件而不是按钮。我可以让它以某种方式定位按钮吗？

4

3 回答 3

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>
于 2016-02-25T05:12:39.640 回答
0

如果您尝试提交表单，请执行以下操作。
先去掉.featured_image图片输入，我们可以动态创建，你的函数就是processFile..

function processFile( file ) {
  $('.picture span').remove();
  $('<img />').attr("src",file).appendTo( $('.picture') );
  $("<input />",{
    "type": "hidden",
    "class": "featured_image",
    "placeholder": "Featured Image",
    "name": "featured_image[]",
    "value": file
  }).insertAfter( $(".picture") );
}
于 2013-07-20T22:09:52.217 回答
0

我通过添加一个.click标记相应 div 的简单函数解决了我的问题，现在 Javascript 看起来像这样：

<script type="text/javascript"> 
    $('.imageUpload').click(function() {
    $(".active-slide").removeClass("active-slide");
            $(this).parent("div").addClass("active-slide")
    });
    $('.imageUpload').popupWindow({ 
            windowURL:'elfinder/alone_elfinder.html?mode=image', 
            windowName:'Filebrowser',
            height:490, 
            width:950,
            centerScreen:1
    }); 
    function processFile(file){
        $(".active-slide").children(".picture").html('<img src="' + file + '" />');
        $(".active-slide").children(".featured_image").val(file);
        $(".active-slide").removeClass("active-slide");
}
</script>
于 2013-07-24T19:04:14.337 回答