將相同的JS腳本應用於多個文件上傳字段

我有一個具有3個獨立文件上傳字段的表單。我還有一個JS腳本，用於在添加文件時顯示圖像預覽。該劇本效果很好。我的問題是，我希望它能夠在3個上傳字段的每一個上運行，以便它們都具有預覽圖像。很明顯，不想寫3次相同的腳本，但不知道如何將相同的腳本應用於多個輸入字段。將相同的JS腳本應用於多個文件上傳字段

這裏是我的標記：

<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

感謝您的幫助！

來源

2014-05-20 MatthewSchenker

嗯，我注意到的第一件事就是你的目標圖像的id與源輸入元素幾乎相同 - 只需要用「image」替換「input」即可。 I.e input1 - > image1，input2 - > 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>

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

來源

2014-05-20 16:06:23 enhzflep

這看起來太棒了！感謝您的幫助。還有一個問題：是否可以進一步減少「$（」＃input1「），」$（「＃input2」）「...引用？例如，如果我有10個輸入字段，我需要列出顯然所有的10個？ – MatthewSchenker

不客氣，很高興幫助。我只是試圖保持代碼簡短和甜蜜的給定的html。總是有一個循環或明確地做事情的盈虧平衡點。，我認爲這一點在這個例子中大概是3個元素，有10個元素，我也希望使用一個循環，考慮到這一點，你可以使用我剛剛添加到解決方案中的替代myInit函數 – enhzflep

實現了另一個小問題，在Chrome和Safari瀏覽器中，在選擇圖像之前，在輸入區域下面會出現一個「破碎的圖像」，這在Firefox中不是問題，解決這個問題的最佳方法是什麼？ – MatthewSchenker

將相同的JS腳本應用於多個文件上傳字段

回答

相關問題