"multiple fiel input"
Bootstrap 3.0.0 Snippet by neomobil

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h3>Bilder</h3>
<hr/>
<div class="col-md-3">
<div class="form-group">
<label for="logo-id" class="main-img-preview">
<img class="thumbnail img-preview" src="/res/img/ic_photo_camera.png"/>
<div class="input-group" >
<div class="input-group-btn">
<div class="fileUpload btn btn-default fake-shadow">
<span><i class=""></i></span>
<input id="fileupload" name ="image[]" type="file" accept="image/*" class="attachment_upload" multiple>
</div>
</div>
</div>
</label>
</div>
</div>
<div class="col-md-9" id="dvPreview">
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function () {
var inp = $("#inputs");
var brand = document.getElementById('logo-id');
var htmlstring = "<div class=\"form-group col-md-3\" id=\"inputs\"><img class=\"thumbnail img-preview\" src=\"/res/img/ic_photo_camera.png\"/><div class=\"input-group\" ><div class=\"input-group-btn\"><div class=\"fileUpload btn btn-default fake-shadow\"><span><i class=\"\"></i></span><input type=\"file\" name=\"image[]\" class=\"attachment_upload\"></div></div>";
brand.className = 'attachment_upload';
brand.onchange = function () {
document.getElementById('fakeUploadLogo').value = this.value.substring(12);
};
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.img-preview').attr('src', e.target.result);
$('.img-preview').attr('height', 150);
};
reader.readAsDataURL(input.files[0]);
}
}
$("#logo-id").click(function () {
inp.prepend(htmlstring);
});
$(".attachment_upload").change(function () {
readURL(this);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: