Jquery 在本地存储中上载/显示多个文件

我正试图让它，使您可以上传多张照片到本地存储与每个产品有自己的上传输入。（目前仅适用于产品1）

我尝试过复制jQuery代码并修改变量，但无法使其工作

谁能把我引向正确的方向

谢谢

图像：（请注意，它在产品1上显示图像，但在产品2上不显示）

HTML:

产品1
产品2
产品3

jQuery：

<script>
$(document).ready(function(){
  //You might want to do if check to see if localstorage set for theImage here
  var img = new Image();                
  img.src = localStorage.theImage;

  $('.image1').html(img);

  $("body").on("change","#upload1",function(){
      //Equivalent of getElementById
      var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.
      var file =fileInput.files[0]; //there is only '1' file since they are not multiple type.

      var reader = new FileReader();
      reader.onload = function(e) {
           // Create a new image.
           var img = new Image();

           img.src = reader.result;
           localStorage.theImage = reader.result; //stores the image to localStorage
           $(".image1").html(img);
       }

       reader.readAsDataURL(file);//attempts to read the file in question.
    });
});
</script>

$（文档）.ready（函数（）{
//您可能需要在此处执行if检查，查看是否为图像设置了本地存储
var img=新图像（）；
img.src=localStorage.theImage；
$（'.image1'）.html（img）；
$（“body”）。关于（“更改”，“上传1”，函数（）{
//getElementById的等价项
var fileInput=$（this）[0]；//通过放置[0]返回HTML DOM对象，因为它实际上是一个关联数组。
var file=fileInput.files[0]；//只有“1”文件，因为它们不是多种类型。
var reader=new FileReader（）；
reader.onload=函数（e）{
//创建一个新的图像。
var img=新图像（）；
img.src=reader.result；
localStorage.theImage=reader.result；//将图像存储到localStorage
$（“.image1”）.html（img）；
}
reader.readAsDataURL（文件）；//尝试读取有问题的文件。
});
});

它确实适用于第一个产品，但是我无法使它适用于多个文件输入

要解决此问题，需要对逻辑进行泛化。您可以从使用公共类来标识文件输入和图像应该显示的相关div元素开始

然后需要将图像存储在一个数组中。由于localStorage仅允许保存字符串值，因此需要序列化此数组。JSON是这方面的理想选择

最后，您可以将显示本地存储中的图像的逻辑提取到一个函数中，该函数可以在加载时以及在设置新图像时调用。试试这个：

-注意，由于SO对代码段中本地存储访问的限制，此示例仅适用于小提琴

$（文档）.ready（函数（）{
showImages（）；
$（“body”）.on（“change”，“.file upload”，函数（）{
var$input=$（此）；
var file=$input[0]。文件[0]；
var reader=new FileReader（）；
reader.onload=函数（）{
var images=JSON.parse（localStorage.getItem（'images'））| |[]；
图像[$input.index（'.file upload'）]=reader.result；
setItem（'images'，JSON.stringify（images））；
展示图像（图像）；
}
reader.readAsDataURL（文件）；
});
});
功能显示图像（内容）{
$（'.image'）.empty（）；
var images=content | | JSON.parse（localStorage.getItem（'images'））| |[]；
image.forEach（函数（image，i）{
$('

产品1
产品2
产品3
您的代码运行得非常好：。请注意，我建议您使用
getItem（）
和
setItem（）
出于浏览器兼容性的原因，但您的代码将按原样工作。如果您有问题，请检查控制台是否有错误。感谢您的回复，它确实适用于第一个产品，但我无法让它与多个文件输入一起工作。产品2、3等。实际上，不要使用本地存储来存储图像或任何二进制数据使用它可以将文件直接存储为原始二进制数据。我不知道您是否知道，但localStorage并不是用来存储此类数据的，这样的答案至少应该这样说，而且对于此类任务来说。
<script>
$(document).ready(function(){
  //You might want to do if check to see if localstorage set for theImage here
  var img = new Image();                
  img.src = localStorage.theImage;

  $('.image1').html(img);

  $("body").on("change","#upload1",function(){
      //Equivalent of getElementById
      var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.
      var file =fileInput.files[0]; //there is only '1' file since they are not multiple type.

      var reader = new FileReader();
      reader.onload = function(e) {
           // Create a new image.
           var img = new Image();

           img.src = reader.result;
           localStorage.theImage = reader.result; //stores the image to localStorage
           $(".image1").html(img);
       }

       reader.readAsDataURL(file);//attempts to read the file in question.
    });
});
</script>