前端提交file圖片後,將圖片顯示出來

<script type="">
    $(document).ready(function () {
        var userLogo=document.getElementById("imgs");
        var modifyheadimg=document.getElementsByClassName("modifyheadimg");
        var photo=document.getElementById("photo");
        photo.addEventListener("change",function () {
            var file=this.files[0];
            //方法1
            var $imgfile=$(this);
            var imgobj=$imgfile[0];
            var windowURL=window.url || window.webkitURL;
            var dataimgurl=windowURL.createObjectURL(imgobj.files[0]);
            $("#imgs").attr("src",dataimgurl);
            //方法2
            // if(file.type.indexOf("image")==0){
            //     var reader=new FileReader();
            //     reader.readAsDataURL(file);
            //     reader.οnlοad=function (ev) {
            //         var newUrl=this.result;
            //         $("#imgs").attr("src",newUrl);
            //     }
            // }
        })
    })
</script>

<div>

<img src="$!img" width="132" height="132" id="imgs"/>
<div style="height:34px;margin-top: 10px;">
    <span>上傳文件:</span>
    <input type="file" id="photo" name="photo"  style="width: 200px;border-radius: 4px;height: 34px;"/>
</div>

</div>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章