選擇圖片後,頁面回顯圖片

<div class="form-group form-group-lg">
<label class="col-xs-1 control-label">封面:</label>
<div class="col-xs-11 clearfix">
<div class="pull-left js-upload-img-wrapper">
<img class="js-upload-img" src="/img/default.jpg"
onerror="this.src='/img/default.jpg'" height="140" width="260" alt="">
</div>
<span style="margin: 50px 10px; float: left;">(點擊圖片上傳封面)</span>
<input type="file" class="js-upload-img-trigger hidden" name="files" accept="image/jpeg, image/jpg, image/png, image/git">
</div>
</div>
 
 
 
// 圖片文件提交$('.js-upload-img-wrapper').on('click', '.js-upload-img',function () {    $('.js-upload-img-trigger').click();});$('.js-upload-img-trigger').change(function(event){    var node = event.target;    var imgURL = "";    try{        var file = null;        if(node.files && node.files[0] ){            file = node.files[0];        }else if(node.files && node.files.item(0)) {            file = node.files.item(0);        }        //Firefox 因安全性問題已沒法直接經過input[file].value 獲取完整的文件路徑        try{            imgURL =  file.getAsDataURL();        }catch(e){            imgURL = window.URL.createObjectURL(file);        }    }catch(e){        if (node.files && node.files[0]) {            var reader = new FileReader();            reader.onload = function (e) {                imgURL = e.target.result;            };            reader.readAsDataURL(node.files[0]);        }    }    $(".js-upload-img-wrapper").html("<img class='js-upload-img' src='"+imgURL+ "' height='140' width='260'/>");})
相關文章
相關標籤/搜索