1

<li>ユーザーが画像、URL、およびWeb ページに追加されるテキストを選択する HTML フォームを作成しています。私の問題は、ユーザーが<li>入力ごとに複数作成できるようにすることです。これを行う最も簡単な方法は、値を配列に割り当てることだと思いましたが、これにより次の問題が発生します...

画像は、JavaScriptを介して操作されるファイルブラウザウィンドウ（正確にはelfinder）を開くボタンを介して選択され、それぞれに画像を追加する方法がわかりません<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>

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

対応する div をマークする単純な関数を追加することで問題を解決し.clickました。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 に答える