How to take multiple images value and push array

问题

I want to do a multiple file upload and I have to convert an image into base64 encoded string. I have one form and two form fields, like firstname & image upload. Suppose a user enters his name and he will upload two photos and he will click submit means, I want convert these two images into base64 string and I want to make my expected JSON format, I don't where I have to change from this code, please anyone update my code

var abc = 0;      // Declaring and defining global increment variable.
$(document).ready(function() {
  //  To add new input file field dynamically, on click of "Add More Files" button below function will be executed.
  $('#add_more').click(function() {
    $(this).before($("<span/>", {
      id: 'filediv'
    }).fadeIn('slow').append($("<input/>", {
      name: 'file[]',
      type: 'file',
      id: 'file'
     }), $(" ")));
   });


   // Following function will executes on change event of file input to select different file.
   $('body').on('change', '#file', function() {
     if (this.files && this.files[0]) {
       abc += 1; // Incrementing global variable by 1.
       var z = abc - 1;
       var x = $(this).parent().find('#previewimg' + z).remove();
       $(this).before("<span id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></span>");
       var reader = new FileReader();
       reader.onload = imageIsLoaded;
       reader.readAsDataURL(this.files[0]);
       $(this).hide();
       $("#abcd" + abc).append($("<img/>", {
         id: 'img',
         src: 'x.png',
         alt: 'delete'
       }).click(function() {
         $(this).parent().parent().remove();
       });
     )
   });
});


// To Preview Image
function imageIsLoaded(e) {
  $('#previewimg' + abc).attr('src', e.target.result);
};

// Form Submit
$('#upload').click(function(e) {
	e.preventDefault();

var firstName = $("#firstName").val();

var json ={
"rentProperty": 
    {
    "fname" : firstName,
    },
	"gallery":"not loaded yet"

}
var floor_image;
var filesSelected = document.getElementById("file").files;
	if (filesSelected.length > 0) {
	  var fileToLoad = filesSelected[0];

	  var fileReader = new FileReader();

	  fileReader.onload = function(fileLoadedEvent) {
		floor_image = fileLoadedEvent.target.result; 
		json.gallery=({"image": floor_image });
	  }
	  fileReader.readAsDataURL(fileToLoad);
	}
console.log(json); 

});

});

 @import "http://fonts.googleapis.com/css?family=Droid+Sans";
    form{
    background-color:#fff
    }
    #maindiv{
    width:960px;
    margin:10px auto;
    padding:10px;
    font-family:'Droid Sans',sans-serif
    }
    #formdiv{
    width:500px;
    float:left;
    text-align:center
    }
    form{
    padding:40px 20px;
    box-shadow:0 0 10px;
    border-radius:2px
    }
    h2{
    margin-left:30px
    }
    .upload{
    background-color:red;
    border:1px solid red;
    color:#fff;
    border-radius:5px;
    padding:10px;
    text-shadow:1px 1px 0 green;
    box-shadow:2px 2px 15px rgba(0,0,0,.75)
    }
    .upload:hover{
    cursor:pointer;
    background:#c20b0b;
    border:1px solid #c20b0b;
    box-shadow:0 0 5px rgba(0,0,0,.75)
    }
    #file{
    color:green;
    padding:5px;
    border:1px dashed #123456;
    background-color:#f9ffe5
    }
    #upload{
    margin-left:45px
    }
    #noerror{
    color:green;
    text-align:left
    }
    #error{
    color:red;
    text-align:left
    }
    #img{
    width:17px;
    border:none;
    height:17px;
    margin-left:-20px;
    margin-bottom:91px
    }
    .abcd{
    text-align:center
    }
    .abcd img{
    height:100px;
    width:100px;
    padding:5px;
    border:1px solid #e8debd
    }
    b{
    color:red
    }

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <body>
    <div id="maindiv">
    <div id="formdiv">
    <h2>Multiple Image Upload Form</h2>
    <form enctype="multipart/form-data" action="" method="post">
    First Name: <input type="text" name ="firstName" id="firstName"><br><br><br>


    <div id="filediv"><input name="file[]" type="file" id="file"  multiple/></div>
    <input type="button" id="add_more" class="upload" value="Add More Files"/>
    <input type="submit" value="Submit" name="submit" id="upload" class="upload"/>
    </form>
    </div>
    </div>
    </body>

My Expected answer should come like this

{
"rentProperty": 
    {
    "fname" : firstName,
    },
"gallery": [
        {
            "image": "data:image/png/base64.ibokjnerkjdjflkdasafsdnmj........"
        },
        {
            "image": "data:image/jpg/base64.ibokjnerkjdjflkdasafsdnmj........"
        }
],
}

I tried like this

$('#upload').click(function(e) {
e.preventDefault();

var firstName = $("#firstName").val();

var floor_image;
var filesSelected = document.getElementById("file").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        floor_image = fileLoadedEvent.target.result; 
        json.gallery=({"image": floor_image });
      }
      fileReader.readAsDataURL(fileToLoad);
    }

var json ={
"rentProperty": 
    {
    "fname" : firstName,
    },
    "gallery":"not loaded yet"

}
console.log(json); 

});

I am getting answer like this

{
"rentProperty": 
    {
    "fname" : firstName,
    },
"gallery": 
        {
            "image": "data:image/png/base64.ibokjnerkjdjflkdasafsdnmj........"
        }
}

I think i have to foreach loop and i have to push in to one array, but i am not sure if anyone know means update my answer

回答1:

You need an array. Just change this string:

json.gallery=({"image": floor_image });

json.gallery[]=({"image": floor_image });

来源：https://stackoverflow.com/questions/46771160/how-to-take-multiple-images-value-and-push-array

标签

javascript

jquery

json

foreach

base64