text 单个和多个文件上传预览

Posted 2021-05-02

https://bootsnipp.com/snippets/B2yPB

// ================== FILE PREVIEW MULTIPLE =====================
HTML:
<div class="form-group">
    <label for="featured">Files</label>
    <input type="file" id="filename" name="filename[]" class="form-control" onchange="preview_images();" multiple>
</div>

<div class="row" id="image_preview"></div>
  
JS:
  
    function preview_images() {
        var total_file=document.getElementById("filename").files.length;
        for(var i=0;i<total_file;i++) {
            $('#image_preview').append("<div class='col-md-3'><img class='img-responsive' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
        }
    }


// ================== FILE PREVIEW MULTIPLE (STUPID FIREFOX) =====================
HTML:
<div class="form-group">
    <label for="featured">Files</label>
    <input type="file" id="filename" name="filename[]" class="form-control" multiple>
</div>

<div class="row" id="image_preview"></div>
  
JS:
  
document.getElementById('filename').addEventListener('change', preview, false);
    
function preview_images(event) {
    var total_file=document.getElementById("filename").files.length;
    for(var i=0;i<total_file;i++) {
        $('#image_preview').append("<div class='col-md-3'><img class='img-responsive' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
    }
}




//================ FILE PREVIEW SINGLE =====================
    
HTML:
<div class="form-group">
    <label for="">Profile Picture</label><br>
    <input type="file" class="form-control" id="profile" name="profile" onchange="preview_images();">
   
</div>

<div class="row" id="image_preview"></div>
    
JS:
function preview_images() {
    var total_file=document.getElementById("profile").files.length;
    for(var i=0;i<total_file;i++) {
        $('#image_preview').html("<div class='col-md-2'><img class='img-responsive' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
    }
}