Question

我有一个包含3个单独的文件上传字段的表单。我还有一个JS脚本，可以在添加文件时显示图像预览。脚本效果很好。我的问题是，我希望它在3个上传字段中的每一个上运行，因此它们都有预览图像。显然，不想编写相同的脚本3次，但不确定如何将相同的脚本应用于多个输入字段。

这是我的标记：

<div class="form_box_item">
    <input type='file' id="input1" />
    <p><img id="image1" src="#" height="60" width="80" alt="" /></p>
</div>

<div class="form_box_item">
    <input type='file' id="input2" />
    <p><img id="image2" src="#" height="60" width="80" alt="" /></p>
</div>

这是JS：

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

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

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

$("#input1").change(function () {
    readURL(this);
});

这是我的脚本作为JS Fiddle

运行

感谢您的帮助！

Answer 1

嗯，我注意到的第一件事是你的目标图像的id与源输入元素几乎相同 - 只需要替换＆＃34;输入＆＃34;与＆＃34;图像＆＃34;。即输入1 - ＆gt; image1，input2 - ＆gt;图像2

接下来我注意到，你的reader.onload函数目前针对特定元素 - ＃image1。我还注意到readURL函数的输入是输入元素本身。

考虑到这些因素，我们可以更改onload功能，以便：

获取触发其调用的元素的ID
替换＆＃34;输入＆＃34;用＆＃34;图像＆＃34;在这个id字符串
使用此计算的id字符串来定位正确的图像。

一旦实施，就会出现一个完整的例子：

<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>

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

        reader.onload = function (e) 
        {
            var imgId = input.id.replace("input", "image");
            $("#"+imgId).attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
     }
}

window.addEventListener('load', myInit, false);

// target 2 input elements explicitly
//function myInit()
//{
//  $("#input1").change( onFileInputChanged );
//  $("#input2").change( onFileInputChanged );
//}

// target all inputs of type=file
function myInit()
{
    $(':file').each(
        function(){ 
                $(this).change( onFileInputChanged ) 
        } 
    );
}


function onFileInputChanged(evt)
{
    readURL(this);
}

</script>
<style>
</style>
</head>
<body>
    <div class="form_box_item">
        <input type='file' id="input1" />
        <p><img id="image1" src="#" height="60" width="80" alt="" /></p>
    </div>

    <div class="form_box_item">
        <input type='file' id="input2" />
        <p><img id="image2" src="#" height="60" width="80" alt="" /></p>
    </div>
</body>
<html>

小提琴：http://jsfiddle.net/hvmVJ/16/

将Same JS脚本应用于多个文件上载字段

1 个答案: