base64编码的图像在“提交”按钮中不起作用

Question

Here i did multiple file images with base64 conversion , everything working fine , for my requirement user select the multiple images and click the submit button means i have to take the values(file) and converted to base64 encoded string,here when select image that time it will working fine but going submit the button i am getting undefined how to solve this error

 $(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()"> 

Answer 1

When press submit button you call "myFunction" without passing anything..

 $(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"> 

Answer 2

Your imgBase64Arr variable is not globally defined. Please defined it globally.