HTML多FILEREAD

Question

HTML代碼：

<input type="file" name="img1" id="img1" required> 
<input type="file" name="img2" id="img2"> 
<input type="file" name="img3" id="img3"> 
<input type="file" name="img4" id="img4"> 

jQuery代碼：

for(var i = 1; i <= 4; i++){ 
       if($("#img"+i).val() != ''){ 
        file = document.getElementById('img' + i).files[0]; 
        fileread(file); 
       } 
      } 

function fileread(file){ 
     var result = ''; 
     reader = new FileReader(); 
      reader.onload = function(){ 
       result = reader.result; 
       //return result; 
       localStorage.setItem("lostimage1", result); 

      } 
     reader.readAsDataURL(file); 
    } 

我想，當讀取多個文件的提交按鈕，用戶點擊。但它不工作。我該如何解決這個錯誤？請幫幫我。

Answer 1

使用jQuery和各（）方法，我的建議是：

var checkValue; 
 
var valueArray=[]; 
 
$('#button').on('click',function(){ 
 
    $('input').each(function(){  
 
    checkValue=$(this).val(); 
 
    if(checkValue===''){ 
 
     return; 
 
    } 
 
    valueArray.push(checkValue);  
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" name="img1" id="img1" required> 
 
<input type="file" name="img2" id="img2"> 
 
<input type="file" name="img3" id="img3"> 
 
<input type="file" name="img4" id="img4"> 
 
    <button id="button">Click Me</button>

Answer 2

連接click事件<input type="submit">，叫event.preventDefault()防止<form>提交，使用.each()迭代<input type="file">元素，通過this.files[0]到readfile函數。

在FileReaderload內調整處理程序不覆蓋相同的密鑰在localStorage。

FileReader引發錯誤如果Blob或File對象沒有被作爲參數傳遞給.readAsDataURL()通過，例如, ifis clicked and FILEREAD is called in loop and one ofelements .files property doe not contain文件object in文件清單. Check if element .files has。長度 FILEREAD referencing the .files [0 ] property of the current`元素。

$(function() { 
    function fileread(file, id) { 
    var reader = new FileReader(); 
    reader.onload = function() { 
     localStorage.setItem("lostimage" + id, reader.result);  
    } 
    reader.readAsDataURL(file); 
    } 

    $("input[type=submit]").on("click", function(e) { 
    e.preventDefault(); 
    $(":file[id^=img]").each(function() { 
     if (this.files.length) fileread(this.files[0], this.id.replace(/\D/g, "")) 
    }) 
    }); 
}); 

plnkr http://plnkr.co/edit/1Sec8uWlK2pbXMTlfpCj?p=preview