base64 编码图像在提交按钮中不起作用答案

【问题标题】：base64 encoded image not working in the submit buttonbase64 编码图像在提交按钮中不起作用
【发布时间】：2017-01-10 13:35:22
【问题描述】：

在这里我使用 base64 转换做了多个文件图像，一切正常，对于我的要求，用户选择多个图像并单击提交按钮意味着我必须获取值（文件）并转换为 base64 编码的字符串，这里选择图像到时候它会正常工作，但要提交按钮我变得不确定如何解决这个错误

$(document).ready(function(){
    $("input[name=property_images]").change(function() {
      var imgBase64Arr = [];
      var files = this.files;
      for (var i = 0; i < files.length; i++) {
        (function(i){
          var FR = new FileReader();
          FR.onload = function(e) {
			  
			var res = e.target.result ;
			var arr1 = res.split(",");
			var property_image = arr1[1] ;
            imgBase64Arr.push( property_image);//adding base64 value to array

            if(i === files.length -1)//after all files are porcessed
              myFunction(imgBase64Arr)
          };
          FR.readAsDataURL(files[i]);
        })(i);
      }

    });
   
});

function myFunction(imgBase64Arr){
     console.log(imgBase64Arr);
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input type="file" name="property_images" multiple="multiple" />
<input type="button" value="submit" onclick="myFunction()">

【问题讨论】：

嗯，你调用 myFunction 没有传入任何东西！ imgBase64Arr 未定义，因为它未定义。其次，当您进行更正时，imgBase64Arr 是在 change 方法中定义的，因此在它之外无法评估。
您没有在函数中提供任何参数：myFunction()。当console.log(imgBase64Arr); imgBase64Arr 是未定义的。
在更改图像时，我像这样通过 myFunction(imgBase64Arr);
如何解决这个问题，请大神解答

标签： javascript jquery base64

【解决方案1】：

当按下提交按钮时，你调用“myFunction”而不传递任何东西..

$(document).ready(function(){
    var imgBase64Arr = [];
    $("input[name=uploadBtn]").click(function(){
       console.log(imgBase64Arr);
    });
    $("input[name=property_images]").change(function() {
      imgBase64Arr = [];
      var files = this.files;
      for (var i = 0; i < files.length; i++) {
        (function(i){
          var FR = new FileReader();
          FR.onload = function(e) {
			  
			var res = e.target.result ;
			var arr1 = res.split(",");
			var property_image = arr1[1] ;
            imgBase64Arr.push( property_image);//adding base64 value to array

            if(i === files.length -1)//after all files are porcessed
              myFunction(imgBase64Arr)
          };
          FR.readAsDataURL(files[i]);
        })(i);
      }

    });


   
});

function myFunction(imgBase64Arr){
     console.log(imgBase64Arr);
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input type="file" name="property_images" multiple="multiple" />
<input type="button" name="uploadBtn" value="submit">

【讨论】：

【解决方案2】：

您的 imgBase64Arr 变量未全局定义。请在全局范围内定义它。

【讨论】：