我想进行多文件上传，我必须将图像转换为base64编码的字符串。我有一个表单和两个表单字段，如firstname＆amp;图片上传。假设一个用户输入他的名字，他将上传两张照片，他将点击提交方式，我想将这两个图像转换为base64字符串，我想制作我预期的JSON格式，我不知道我必须从哪里改变这段代码，请任何人更新我的代码
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 name = $(":file").val();
if (!name) {
alert("First Image Must Be Selected");
}*/
var firstName = $("#firstName").val();
console.log(firstName);
var data ={
"rentProperty":
{
"fname" : firstName,
},
"gallery": [
{
"image": "data:image/png/base64.ibokjnerkjdjflkdasafsdnmj........"
},
{
"image": "data:image/jpg/base64.ibokjnerkjdjflkdasafsdnmj........"
}
],
}
});
});@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>
我的JSON格式预期答案
var data ={
"rentProperty":
{
"fname" : firstName,
},
"gallery": [
{
"image": "data:image/png/base64.ibokjnerkjdjflkdasafsdnmj........"
},
{
"image": "data:image/jpg/base64.ibokjnerkjdjflkdasafsdnmj........"
}
],
}