[英]Getting multiple images to display before uploading them using jquery and ajax
I am trying to preview multiple images before I upload it onto my site. 我试图预览多张图片,然后再将其上传到我的网站上。 Although mine isn't working for some reason.
尽管我的出于某种原因无法正常工作。 I am not getting any errors in the console.
我在控制台中没有任何错误。 Below is the JS for it,
下面是它的JS,
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
This is the html 这是HTML
<div class="input-group">
<label for="file-upload" class="custom-file-upload" ">
<i class="fa fa-cloud-upload"></i> Chosose File...
</label>
<input id="file-upload" type="file" multiple id="gallery-photo-add/>
<button class="btn btn-lg btn-primary btn-block btn-signin-upload" type="submit">Upload</button>
</div>
<div class="gallery"></div>
Any help would be grateful, thanks 任何帮助将不胜感激,谢谢
Here you can find your correct code: https://jsfiddle.net/zhvdjxxo/1/ Seems like you've mistaken the ids in "onchange" function. 在这里您可以找到正确的代码: https: //jsfiddle.net/zhvdjxxo/1/好像您在“ onchange”函数中误认了id。
$(function() {
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
console.log(input.files);
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#file-upload').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.