如何拍摄多个图像值并推送数组 [英] How to take multiple images value and push array
本文介绍了如何拍摄多个图像值并推送数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
var abc = 0; //（声明和定义全局增量变量）$（document）.ready（function（）{//要动态添加新的输入文件字段，点击下面的Add More Files按钮将会执行$（'＃add_more '）.click（function（）{$（this）.before（$（< span />，{id：'filediv'}）。输入/>，{name：'file []'，输入：'file'，id：'file'}），$（）））;}）; //下面的函数将执行change事件（'body'）。on（'change'，'#file'，function（）{if（this.files&& this.files [0]）{abc + = 1 （）; $（this）.before（）; //将全局变量增加1。 < span id ='abcd+ abc +'class ='abcd'>< img id ='previewimg+ abc +'src =''/>< / span>）; var reader = new FileReader（）; reader.onload = ima geisLoaded; reader.readAsDataURL（this.files [0]）; $（this）.hide（）; $（＃abcd+ abc）.append（$（< img />，{id：'img'，src：'x.png'，alt：'delete'}） ）{$（this）.parent（）。parent（）。remove（）;}）;）}）;}）; //预览图像imageIsLoaded（e）{$（'＃previewimg'+ abc）.attr （'src'，e.target.result）;}; //表单提交$（'＃上传'），点击（函数（e）{e.preventDefault（）; var firstName = $（＃firstName）。 val（）; var json = {rentProperty：{fname：firstName，}，gallery：not loaded yet} var floor_image; var filesSelected = document.getElementById（file）.fif; if var fileReload = fileReader（）; fileReader.onload = function（fileLoadedEvent）{floor_image = fileLoadedEvent.target.result; json.gallery =（{image ：floor_image}）;} fileReader.readAsDataURL（fileToLoad）;} console.log（json）;}）;}）;
@imp orthttp://fonts.googleapis.com/css?family=Droid+Sans; form {background-color：#fff} #maindiv {width：960px; margin：10px auto;填充：10px的; font-family：'Droid Sans'，sans-serif} #formdiv {width：500px;向左飘浮; text-align：center} form {padding：40px 20px; box-shadow：0 0 10px; border-radius：2px} h2 {margin-left：30px} .upload {background-color：red;边框：1px纯红色;颜色：#FFF;边界半径：5像素;填充：10px的; text-shadow：1px 1px 0 green; box-shadow：2px 2px 15px rgba（0,0,0，.75）} .upload：hover {cursor：pointer;背景：＃c20b0b; border：1px solid＃c20b0b; box-shadow：0 0 5px rgba（0,0,0，.75）} #file {color：green;填充：5像素;边框：1px虚线＃123456;背景颜色：＃f9ffe5} #upload {margin-left：45px} #noerror {color：green; text-align：left} #error {color：red; text-align：left} #img {width：17px;边界：无;高度：知识+;保证金左：-20px; margin-bottom：91px} .abcd {text-align：center} .abcd img {height：100px;宽度：100像素;填充：5像素; border：1px solid＃e8debd} b {color：red}
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> <身体GT; < div id =maindiv> < div id =formdiv> < h2>多图像上传表单< / h2> < form enctype =multipart / form-dataaction =method =post>名字：< input type =textname =firstNameid =firstName>< br>< br>< br> < div id =filediv>< input name =file []type =fileid =filemultiple />< / div> < input type =buttonid =add_moreclass =uploadvalue =添加更多文件/> < input type =submitvalue =Submitname =submitid =uploadclass =upload/> < /形式> < / DIV> < / DIV> < / body>
预期的答案应该是这样的
{
rentProperty：
{
fname：firstName，
}，
gallery：[
{
image：data：image / png / base64.ibokjnerkjdjflkdasafsdnmj ........
}，
{
image：data：image / jpg / base64.ibokjnerkjdjflkdasafsdnmj ........
$ blockquote
I尝试像这样
$（'＃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.onlo ad = function（fileLoadedEvent）{
floor_image = fileLoadedEvent.target.result;
json.gallery =（{image：floor_image}）;
}
fileReader.readAsDataURL（fileToLoad）;
var json = {
rentProperty：
{
fname：firstName，
}，
gallery：尚未加载
}
console.log（json）;
}）;
我得到这样的回答
{
rentProperty：
{
fname：firstName，
$ b $ gallery
$ image $ data $ image $ p
$ b $
我想我必须foreach循环，我必须推入一个数组，但我不知道是否有人知道意味着更新我的答案
解决方案你需要一个数组。只要改变这个字符串：
json.gallery =（{image：floor_image}）;
到
json.gallery [] =（{image：floor_image}）;
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
解决方案 You need an array. Just change this string:
json.gallery=({"image": floor_image });
to
json.gallery[]=({"image": floor_image });
这篇关于如何拍摄多个图像值并推送数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
