Fatal编程技术网
  • javascript/
  • Javascript 将相同的JS脚本应用于多个文件上载字段

Javascript 将相同的JS脚本应用于多个文件上载字段

javascript input

Javascript 将相同的JS脚本应用于多个文件上载字段,javascript,input,Javascript,Input,我有一个带有3个单独文件上传字段的表单。我还有一个JS脚本，可以在添加文件时显示图像预览。剧本写得很好。我的问题是，我希望它在3个上传字段中的每一个上运行，这样它们都有预览图像。显然，我们不想编写同一个脚本3次，但不确定如何将同一个脚本应用于多个输入字段 以下是我的标记： <div class="form_box_item"> <input type='file' id="input1" /> <p><img id="image1" sr

我有一个带有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);
});


函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#image1'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#输入1”）。更改（函数（）{
readURL（this）；
});

这是我的脚本作为一个脚本运行

谢谢你的帮助

嗯，我注意到的第一件事是，目标图像的id几乎与源输入元素相同——只需将“输入”替换为“图像”。即输入1->image1，输入2->image2

我注意到的下一件事是，
reader.onload
函数当前的目标是一个特定的元素-#image1。我还注意到，
readURL
函数的输入是输入元素本身

记住这些，我们可以更改
onload
函数，以便：

  • 获取触发其调用的元素的id
  • 将此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>


函数readURL（输入）
{
if（input.files&&input.files[0]）
{
var reader=new FileReader（）；
reader.onload=函数（e）
{
var imgId=input.id.replace（“输入”、“图像”）；
$（“#”+imgId.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
addEventListener（'load'，myInit，false）；
//明确目标2个输入元素
//函数myInit（）
//{
//$（“#输入1”）。更改（onFileInputChanged）；
//$（“#输入2”）。更改（onFileInputChanged）；
//}
//将类型=file的所有输入作为目标
函数myInit（）
{
$（':file'）。每个(
函数（）{
$（此）.change（onFileInputChanged）
} 
);
}
函数onFileInputChanged（evt）
{
readURL（this）；
}
小提琴手：

这看起来很棒！谢谢你的帮助。还有一个问题：是否有可能进一步减少“$”（“#input1”）、“$”（“#input2”）" ... 推荐人？例如，如果我有10个输入字段，我需要明确列出所有10个？不客气。很高兴这有帮助。对于给定的html，我只是试图让代码简短而甜美。在循环中或显式地做事情总是有一个收支平衡点。对我来说，我认为这一点在这个例子中大约是3个元素。对于10个元素，我也更喜欢使用循环。考虑到这一点，您可以使用我刚刚添加到解决方案中的替代myInit函数。刚刚意识到另一个小问题。在Chrome和Safari中，在选择图像之前，输入字段下方有一个“断开的图像”。这在Firefox中不是问题。解决这个问题的最好办法是什么？再次感谢！我想你可以用很多方法来解决这个问题。我可能倾向于创建一个1px 1px透明png图像。我将元素的源设置为html中的源，如果用户按下文件选择对话框中的取消按钮，也将图像元素的源设置为相同的pic。