如何上传图片并预览这些图片

Question

我正在制作自己的CMS。这意味着您可以上传图像，然后将其视为预览。此外，对于几个不同的图像，元素（在页面上）必须是可能的。

以下是我的意思

的图片

<div class="row">
<div class="seven columns">
    <div class="gallery"></div>
</div>
<div class="five columns" style="height:50vh;">
    <input type="file" multiple id="gallery-photo-add"><br />
    <input type="text" name="alt" placeholder="alt">
</div>

$(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');
}); });

我确实有代码可以使这个工作1倍。但是，如果我粘贴这个2x然后这不起作用

Answer 1

试试这个

function readURL(input, id) {
     if (input.files && input.files[0]) {
         var reader = new FileReader();
         reader.onload = function(event) {
             $('#'+id).attr('src', event.target.result);
         }
         reader.readAsDataURL(input.files[0]);
     }
}
    
$("#img").change(function(){
   readURL(this, 'preview');
});

$("#img1").change(function(){
   readURL(this, 'preview1');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" runat="server">
    <img src="http://placehold.it/180" id="preview">
    <input type='file' id="img"/>
    
    <img src="http://placehold.it/180" id="preview1">
    <input type='file' id="img1"/>
</form>

也许这有助于你