Question

我有一个带文件类型的输入字段，下面是一个占位符图像。当我从文件输入中选择图像时，图像显示在我的图像占位符中。这一切都很好，花花公子，但我需要能够在同一页面上多次这样做，我不知道如何使我的功能可以重复使用，因为脚本是我找到的，我还没学到JS jog jQuery足够好，知道如何做到这一点。

我从PHP知道，如果我有一个函数，我可以通过编写它的名称来调用它，并在parenteses中输入数据/变量，然后在函数中使用。我很确定我可以用jQuery做同样的事情，我只需要弄清楚如何去做。

为清楚起见，我希望能够以这种方式改变的价值是img_placeholder id。

据我所知，该函数已经在内部更改了一个变量，这是输入，但是我只是在输入后面添加一个逗号，选择一个名称，并将其替换为函数中的img_placeholder文本吗？ / p>

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#img_placeholder').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#img_input").change(function(){
        readURL(this);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="post_img" type="file" id="img_input">
<img id="img_placeholder" src="" alt="" width="770" height="auto">

Answer 1

如果您要在同一页面上有多个输入，每个输入都有一个上方/下方的图像，我会考虑这样做：

function processInput()
{
    var inputField = $(this);
    var placeholderId = inputField.attr('data-placeholder');

    if (inputField.files && inputField.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) 
        {
            $('#' + placeholderId).attr('src', e.target.result);
        }

        reader.readAsDataURL(inputField.files[0]);
    }   
}

$("#img_input1").change(processInput);
$("#img_input2").change(processInput);

然后，你的html看起来像这样：

<input name="post_img1" type="file" id="img_input1" data-image="img_placeholder1">
<img id="img_placeholder1" src="" alt="" width="770" height="auto">

<input name="post_img2" type="file" id="img_input2" data-image="img_placeholder2">
<img id="img_placeholder2" src="" alt="" width="770" height="auto">

您可以通过以下方式进一步简化绑定：

$("input[type=file]").change(processInput);

但是，我不确定这是否是您正在寻找的最终效果。但是，通过使用其他属性将输入字段与占位符相关联，您可以通过这种方式使用单个函数调用。

如何重用不同值的jQuery函数？

1 个答案: