Question

我有一个页面，页面有两个图片选择器。当我选择图片文件时，我将其中一个用于显示图片。但我想分开使用它们。我尝试将其作为附加代码。你能帮我个忙吗？我怎么能分开呢？另外我如何使用PHP，Javascript或jQuery创建单独的清除按钮？

我尝试使用我的代码，它只为一个选择器而不是其他选择器工作。

Function pseudostring($length = 50) {

    // Generate arrays with characters and numbers
    $lowerAlpha = range('a', 'z');
    $upperAlpha = range('A', 'Z');
    $numeric = range('0', '9');

    // Merge the arrays
    $workArray = array_merge($numeric, array_merge($lowerAlpha, $upperAlpha));
    $returnString = "";

    // Add random characters from the created array to a string
    for ($i = 0; $i < $length; $i++) {
        $character = $workArray[rand(0, 61)];
        $returnString .= $character;
    }

    return $returnString;
}

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

Answer 1

首先，您可以通过使用类而不是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

图像选择器不止一个

1 个答案: