圖像選擇器不止一個

我有一個頁面，頁面有兩個圖片選擇器。我編碼其中一個用於顯示圖片，當我選擇一個圖片文件。但我想單獨使用它們。我嘗試了它作爲附加的代碼。你能幫我一下，我怎麼能分開他們呢？另外我怎樣才能用PHP，Javascript或jQuery分別創建清晰的按鈕？圖像選擇器不止一個

我試着作爲我的代碼，它只適用於一個選擇器，而不是其他。

<form id="form1"> 
    <input type="file" id="image-1-selector"> 
    <img src="#" id="first-image"> 
    <button type="reset" onclick="clearFile(event)">Clear</button><br /><br /> 

    <input type="file" id="image-2-selector"> 
    <img src="#" id="second-image"> 
    <button type="reset" onclick="clearFile(event)">Clear </button> 
</form>

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $('#first-image').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#image-1-selector").change(function() { 
    readURL(this); 
}); 

var clearFile = function(event) { 
    var output = document.getElementById('first-image'); 
    output.src = ''; 
};

來源

2016-04-29 Onder Yilmaz

這是我的示例代碼，它不會像我問 [我的示例程序（https://jsfiddle.net/underspeed/hsurwuod工作/＃＆togetherjs = dfuSRevdHA） –

var clearFile = function（event）{'不會在jsfiddle上工作。 – RRK

是的，但你知道它是什麼，對吧？ –

首先你可以通過使用類而不是ID來選擇元素乾涸你的代碼。從那裏，您可以使用DOM遍歷方法（在這種情況下爲next()和prev()）查找所需的要修改的元素。試試這個：

<form id="form1"> 
    <input type="file" class="image-selector"> 
    <img src="#" class="preview"> 
    <button type="reset" class="clear">Clear </button><br /><br /> 

    <input type="file" class="image-selector"> 
    <img src="#" class="preview"> 
    <button type="reset" class="clear">Clear </button> 
</form>

$(".image-selector").change(function() { 
    var el = this; 
    if (el.files && el.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $(el).next('.preview').prop('src', e.target.result); 
     } 
     reader.readAsDataURL(el.files[0]); 
    } 
}); 

$('.clear').click(function(event) { 
    $(this).prev('.preview').prop('src', ''); 
});

Updated fiddle

來源

2016-04-29 08:00:46

圖像選擇器不止一個

回答

相關問題