html5支持图片预览
具体代码:上传页面 upload_h5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用html5 FileReader获取图片并预览,并异步上传到服务器(not iframe)</title>
<script type="text/javascript">
function imgPreview(fileDom){
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
}
//获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview");
//图片路径设置为读取的图片
img.src = e.target.result;
// ajax 上传图片
$.post("upload_h5.php", {img: e.target.result}, function(ret) {
if (ret.img!='') {
alert('upload success');
$('#showimg').html('<img src="' + ret.img + '">');
} else {
alert('upload fail');
}
},'json');
};
reader.readAsDataURL(file);
}
/*function upload() {
var xhr = new XMLHttpRequest();
var progress = document.getElementById("progress");
progress.style.display = "block";
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
progress.value = percentage;
}
}, false);
xhr.upload.addEventListener("load", function(e){
console.log("上传完毕...")
}, false);
xhr.open("POST", "upload_h5.php");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText); // handle response.
progress.style.display = "none";
progress.value = 0;
}
};
var file = document.getElementById("imgFile");
var fd = new FormData();
fd.append(file.files[0].name, file.files[0]);
xhr.send(fd);
}*/
</script>
</head>
<body>
<img id="preview" />
<br />
<input type="file" name="file" id="imgFile" οnchange="imgPreview(this)" />
<br/>
<!-- <input type="button" id="btnUpload" value="上传" οnclick="upload()" /><div id="progress" style="width:200px;height:24px;"></div> -->
<p id="showimg"></p>
</body>
<script type="text/javascript" src="../Public/js/jquery.min.js"></script>
</html>
图片处理的php页面, upload_h5.php
<?php
$img = isset($_POST['img'])? $_POST['img'] : '';
// 获取图片
list($type, $data) = explode(',', $img);
// 判断类型
if(strstr($type,'image/jpeg')!=''){
$ext = '.jpg';
}elseif(strstr($type,'image/gif')!=''){
$ext = '.gif';
}elseif(strstr($type,'image/png')!=''){
$ext = '.png';
}
// 生成的文件名
$photo = time().$ext;
// 生成文件
file_put_contents($photo, base64_decode($data), true);
// 返回
header('content-type:application/json;charset=utf-8');
$ret = array('img'=>$photo);
echo json_encode($ret);
?>