New FileReader上传图片

Posted 2020-10-15 地铁程序员

function readURL(input) {
   if (input.files && input.files[0]) {
       var reader = new FileReader();
       reader.onload = function (e) {
       	
           $(‘#blah‘).attr(‘src‘, e.target.result);
       }

       reader.readAsDataURL(input.files[0]);
   }

}

　　

$("#imgInp").change(function(){
	var that=this;
	 readURL(that);
});

　　

<a href="javascript:;" class="b-upload">
		<span class="sub">上传名片</span>
		<input type=‘file‘ name=‘paymentQrCode‘ id="imgInp" />
	</a>

　　

.b-upload{
		    height: 40px;
		    line-height: 40px;
		    font-size: 18px;
		    width: 80%;
		    position: relative;
		    cursor: pointer;
		    color: #fff;
		    background: #008ce6;
		    border: 1px solid #ddd;
		    border-radius: 4px;
		    overflow: hidden;
		    text-align: center;
		    display: inline-block;
		    margin-top: 20px;
		}
		.b-upload input{
			position: absolute;
		    font-size: 160px;
		    right: 0;
		    top: 0;
		}