js预览图片

1、单张图片

<input name="teacherImg" id="file" οnchange="preImg(this.id,'imgPre');" type="file">

<img id="imgPre" src="{{config('basicinfo.default_image')}}"/>

function preImg(sourceId, targetId) {
    //design by Dige
    if (typeof FileReader === 'undefined') {
        alert('Your browser does not support FileReader...');
        return;
    }
    var reader = new FileReader();

    reader.onload = function(e) {
        //design by Dige

        var img = document.getElementById(targetId);
        img.src = this.result;
    }
    reader.readAsDataURL(document.getElementById(sourceId).files[0]);
}

<input  style="display: none" name="options[]" id="otherFile" type="file" multiple>

2、多张图片

<input  style="display: none" name="options[]" id="otherFile" type="file" multiple>

<img id="imgPre" src="{{config('basicinfo.default_image')}}"/>

  $('#otherFile').on('change', function(){
      //design by Dige
    var file = $('#otherFile')[0].files;
    var result=$('#result')[0];
    result.innerHTML='';
    for(i = 0; i< file.length; i ++) {
        var reader    = new FileReader();
        reader.readAsDataURL(file[i]);
        reader.οnlοad=function(e){
            result.innerHTML = result.innerHTML + '<div class=col-md-3 style=width:200px;height:200px;background-color:#ccc;background-image:url(' + this.result +');background-repeat:no-repeat;background-position:center;background-size:cover;border-style:solid;border-width:0px5px5px0px;border-color:#fff;"></div>';
        }
    }
});