在使用jquery和ajax上传它们之前,要显示多个图像

时间:2018-02-08 17:53:46

标签: javascript jquery html

我尝试在将其上传到我的网站之前预览多张图片。虽然我的某些原因并不起作用。我在控制台中没有收到任何错误。下面是它的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');
});
});

这是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>

任何帮助都会感激不尽,谢谢

1 个答案:

答案 0 :(得分:0)

您可以在此找到正确的代码:https://jsfiddle.net/zhvdjxxo/1/ 好像你已经误解了&#34; onchange&#34;功能。

A
ID

B
ID    A_ID