图像选择器不止一个

我有一个页面，页面有两个图片选择器。我编码其中一个用于显示图片，当我选择一个图片文件。但我想单独使用它们。我尝试了它作为附加的代码。你能帮我一下，我怎么能分开他们呢？另外我怎样才能用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

图像选择器不止一个

回答

相关问题