獲取多個輸入文件的圖像預覽

Question

我有兩個<input type="file" />元素，對於這兩個輸入，我想要不同的圖片預覽。 但是我只讓它為一個輸入工作。 如何對多個輸入文件執行此操作？

我希望你們中的一些人對我有一個很好的例子，在此先謝謝你。

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#image-1') .attr('src', e.target.result) }; reader.readAsDataURL(input.files[0]); } }

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form enctype="multipart/form-data" action="" method="POST"> <div class="form-group row"> <div class="col-4"> <img id="image-1" style=" height: 100%;" class="form-control" src="./Images/smc.png" /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="bestand" name="userfile" type="file" onchange="readURL(this);" /><br /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="form-control" type="text" name="newname" value="SMC.png"><br /> </div> </div> <div class="form-group row"> <div class="col-4"> </div> </div> <div class="form-group row"> <div class="col-4"> <img style=" height: 100%;" class="form-control" src="./Images/achtergrond.png" /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="bestand" name="userfile1" type="file" /><br /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="form-control" type="text" name="newname1" value="achtergrond.png"><br /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="form-control submit" id="bestand" type="submit" name="instellingen1" value="Bestand uploaden" /> </div> </div> </form>

Answer 1

問題是因為您只從第一個輸入調用readURL() 。 你需要從他們所有人中調用它。 您還需要修改您的邏輯，使其基於 HTML 結構而不是由id選擇的特定元素工作。 為此，您可以使用 DOM 遍歷來查找與選擇了文件的input相關的img 。 具體來說，在這種情況下是closest()和find()方法。 嘗試這個：

 $('input:file').on('change', function() { var input = this; var $input = $(input); if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $input.closest('.form-group').prev('.form-group').find('img').prop('src', e.target.result) }; reader.readAsDataURL(input.files[0]); } });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <form enctype="multipart/form-data" action="" method="POST"> <div class="form-group row"> <div class="col-4"> <img style=" height: 100%;" class="form-control" src="./Images/smc.png" /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="bestand" name="userfile" type="file" /><br /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="form-control" type="text" name="newname" value="SMC.png"><br /> </div> </div> <div class="form-group row"> <div class="col-4"> </div> </div> <div class="form-group row"> <div class="col-4"> <img style=" height: 100%;" class="form-control" src="./Images/achtergrond.png" /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="bestand" name="userfile1" type="file" /><br /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="form-control" type="text" name="newname1" value="achtergrond.png"><br /> </div> </div> <div class="form-group row"> <div class="col-4"> <input class="form-control submit" id="bestand" type="submit" name="instellingen1" value="Bestand uploaden" /> </div> </div> </form>

另外，請注意您在代碼中使用了兩個版本的 jQuery，這是應該避免的。 一個也是“超薄”版本，它沒有 AJAX 功能等。 這不是本質上的錯誤，只是需要注意的事情。