移動端圖片上傳

<li class="photobox">
    <span>頭像</span>
    <div class="phobtn">
        <input id="perPhoto" name="file" type="file" accept="image/*" capture="camera" />
        <img class="" src="img/Choicepic.png" id="perimg" />
    </div>
</li>

.photobox{
	position: relative;
	height: 1.4rem!important;
}
.photobox span{
	height: 1.4rem;
	line-height: 1.4rem!important;
}
.photobox .phobtn{
	position: absolute;
	width: 1rem;
	height: 1rem;
	right: 0;
	top: 0.2rem;
	cursor: pointer;
	border-radius: 0.1rem;
}
.phobtn input{
 	width: 1rem!important;
 	height: 1rem!important;
 	position: absolute;
 	top: 0;
 	right: 0;
 	z-index: 1000;
 	opacity: 0;
}
.phobtn #perimg{
	width: 1rem;
	height: 1rem;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
	border-radius: 0.1rem;
}

window.onload = function () {

var fileTag = document.getElementById('perPhoto');

       		fileTag.onchange = function () {

	           	var file = fileTag.files[0];
	
	           	var fileReader = new FileReader();
	
	           	fileReader.onloadend = function () {
	
	               	if (fileReader.readyState == fileReader.DONE) {
	
	                   	document.getElementById('perimg').setAttribute('src', fileReader.result);
	
	               	}
	
	           	};
	
	           	fileReader.readAsDataURL(file);
    		}
		}