网上百度找到一个方法不错,借鉴:代码如下
html:
<div class="head">
<a class="btn-2">
<input type="file" accept="image/*" id="upload" name="upload">
</a>
</div>
<div class="photo" id="preview"></div>
css样式:
.head{
height:40px;
width:100%;
position:relative;
z-index:110;
left:0px;
top:10px;
}
.head .btn-2{
display:block;
width:42px;
height:45px;
background:url(../image/nimg37_2.png) center no-repeat;
background-size:30px;
position:absolute;
top:0px;
right:46px;
}
.head .btn-2 input {
width:42px;
height:45px;
position: absolute;
right: 0px;
top: 0;
opacity: 0;
}
js.js
var upload = document.getElementById('upload'),
preview = document.getElementById('preview'),
surebtn = document.getElementById('surebtn'),
imgurl = '';
upload.addEventListener('change',handleFile,false);
surebtn.addEventListener('click',upLoadFile,false);
function handleFile(){
window.URL = window.URL || window.webkitURL;
var sUserAgent= navigator.userAgent.toLowerCase();
var selected_file = upload.files[0];
if(sUserAgent.match(/android/i) == "android"){
var img = new Image();
img.src = window.URL.createObjectURL(selected_file);
preview.innerHTML = '';
preview.appendChild(img);
var reader = new FileReader();
reader.onload = function(e) { imgurl = e.target.result; };
reader.readAsDataURL(selected_file);
}else{
//判断文件类型是否为图片
var imageType = /image.*/;
if (!selected_file.type.match(imageType)) {
return false;
}
var img = document.createElement('img');
img.file = selected_file;
preview.innerHTML = '';
preview.appendChild(img);
img.onload = function(){
imgurl = img.src;
}
var reader = new FileReader();
reader.onload = function(e) { img.src = e.target.result; };
reader.readAsDataURL(selected_file);
}
}
function upLoadFile(){
var start = imgurl.indexOf(',')+1;
dataurl = imgurl.substr(start);
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('post','todo.php',true);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');
xmlhttp.setRequestHeader('X_Requested-With','XMLHttpRequest');
xmlhttp.send('dataurl='+encodeURIComponent(dataurl));
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
console.log(xmlhttp.responseText)
}
}
}