input获取图片并渲染到页面上

<input type="file" class="myFile"/>
<div class="imgBox"></div>
<script>
    $(".myFile").change(function(){
        var myF = $(this)[0].files[0];  /*获取文件*/
        if(myF.type.split("/")[0] == "image"){  /* 说明是图片类型的文件 */

            //创建读取文件的对象
            var file = new FileReader();//文件读取
            //分析文件对象
            file.readAsDataURL(myF);
            //文件加载成功
            file.onload = function(e){
                console.log(this.result); /*获取bese路径*/
                if(/image/.test(this.result)){   //或者 e.targin.result
                    var img = new Image();
                    img.src = this.result;
                    img.width = 100;
                    img.style.cssText = ‘margin:5px  0 0 5px‘;
                    $(".imgBox").html(img)
                }
            }

        }else{
            alert("请上传图片文件")
        }
    })
</script>

input获取图片并渲染到页面上

原文：https://www.cnblogs.com/6ovo6/p/14347396.html