HTML表單與多個圖像選擇通過Javascript

我建立一個HTML表單，將讓用戶選擇圖像，URL和將被添加爲<li>到網頁文本。我的問題是，我希望用戶能夠爲每個輸入創建多個<li>，我認爲最簡單的方法是將值分配到數組中，但這對我來說會產生以下問題...HTML表單與多個圖像選擇通過Javascript

圖像是通過打開一個文件瀏覽器窗口（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")目標。我能以某種方式瞄準按鈕嗎？

來源

2013-07-20 Ant

我解決我的問題與添加一個簡單.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-24 19:04:14 Ant

如果你想提交你的表單，然後做這樣的事情。
首先拆下.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-20 22:09:52 bystwn22

雖然它允許添加多個圖像，它在'.picture'添加圖像。我想爲每個圖像設置不同的「添加圖像」按鈕，以便可以更改它們。 – Ant

這是非常有益的，我落得這樣做的：

<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-25 05:12:39 Graham

HTML表單與多個圖像選擇通過Javascript

回答

相關問題