Question

在3块代码之后，想要生成使用循环/数组来制作短代码。我知道使用循环不是一件大事，但对我来说很难用变量“openFile”改变计数器，我想要计数器增量变量“openFile”，如openFile1，openFile2和openFile3，每次迭代循环。

$(function() {

            var openFile1 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img1');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };



      var openFile2 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img2');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };

      var openFile3 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img3');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };


       });

Answer 1

只需创建一个将计数作为arg的函数，并返回一个仅将事件作为arg的函数。由于关闭，当使用给定的count值调用openFile时给出的'count'值将用于内部函数。

  var openFileFunc = function(count) {
    return
        function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img'+(count+1));
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[count]);
      };
    }

现在你可以通过调用这样的地图来获得与你所做的相同的三个功能：

var functions = [1,2,3].map(openFileFunc)

此数组中的每个函数都与您拥有的函数相同。

Answer 2

var openFile = function(arrOfCount){
    var reader; 
    for(i=0;i<arrOfCount;i++){
       reader= new FileReader();
       return  function(event){
             var input = event.target;
             reader.onload = function(){
                  var dataURL = reader.result;
                  var output = document.getElementById('img'+(i+1));
                  output.src = dataURL;
              };
            reader.readAsDataURL(input.files[i]);
          }
      }
}

Answer 3

可能这对你有用。

function callFunctionNtimes(totalCount){

        for(start=1;i<=totalCount;i++)
        {
            var filevar = 'openFile'+start;
            filevar = function(event) 
            {
                var input = event.target;
                var reader = new FileReader();
                reader.onload = function()
                {
                    var dataURL = reader.result;
                    var output = document.getElementById('img'+start);
                    output.src = dataURL;
                };
                    reader.readAsDataURL(input.files[0]);
            };
        }
     }
       //to call n time below function  
       var totalCount = 3;
       callFunctionNtimes(totalCount);

Answer 4

我试图概括代码

 var allImages = document.getElementsByClassName("my-images");
 for (var i = 0; i < allImages.length; i++) {
      var openFile = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = allImages[i];
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);

}

但是你似乎仍然有3个文件上传控件，你想为每个控件显示预览，是这样吗？

需要帮助使用循环生成三个块

4 个答案: