首先html中有个input file的按钮,能选择图片上传
<input type="file" accept="image/*" onChange="fileInfo(this)" />
javascript部分
var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod');
function uploadImg(content){
//1.创建XMLHTTPRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest;
//针对某些特定版本的mozillar浏览器的bug进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
};
} else if (window.ActiveXObject){
//IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
if(xmlhttp.upload){
//2.回调函数
xmlhttp.onreadystatechange = function(e){
if(xmlhttp.readyState==4){
$('#J_loading').hide();
if(xmlhttp.status==200){
var json = eval('(' + xmlhttp.responseText + ')');
if(json.code == 1){
alert('success');
}else{
alert('failed');
}
}else{
alert('failed');
}
}
};
//3.设置连接信息
xmlhttp.open("POST","upload.php",true);
//4.发送数据,开始和服务器进行交互
var formdata = new FormData();
formdata.append("file_content", content);
xmlhttp.send(formdata);
}
}
function fileInfo(source){
var ireg = /image\/.*/i;
var file = source.files[0];
var file_name = file.name;
var file_type = file.type;
if(!file_type.match(ireg)) {
alert('不是图片,请重新选择');
}else{
var img64 = new Image();
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
img64.src = e.target.result;
img64.onload = function(){ //图片加载完之后(需要获取宽度,确定是否要压缩)
var img64_w = img64.width;
var img64_h = img64.height;
var temp_imgData;
if(isiOS){ //iphone5 canvas会变形,所以所有ios的都不压缩(之后有时间再处理)
temp_imgData = e.target.result;
}else{
if(img64_w > 600){ //压缩
var canvas = document.createElement('canvas');
var canvas_w = canvas.width = 660;
var canvas_h = canvas.height = Math.round( 600 * img64_h / img64_w );
canvas.getContext('2d').drawImage( img64, 0, 0, canvas_w, canvas_h );
temp_imgData = canvas.toDataURL("image/png");
}else{
temp_imgData = e.target.result;
}
}
temp_imgData = temp_imgData.split(",")[1];
uploadImg(temp_imgData);
}
};
fr.readAsDataURL(file);
}
}
};
1、通过input file上传的图片,先检查是否为图片
2、通过html5的filereader将文件流读取出来,并将文件流放在一个image中
3、判断image的宽是否符合要求(这里根据实际情况可以改变),图片过大的进行压缩(由于iphone5系统的canvas存在系统级bug,所以对于ios的这里简单的不做压缩处理,之后有时间进行兼容性研究)
4、创建canvas,将图片画到canvas上,进行压缩
5、将压缩的图片(或者未压缩的图片)流读取出来,这时候的图片流应该是base64过的,去掉放在img的src标签中前面声明是base64部分的头
6、然后将base64过的文件流传给php端
php端的处理
$base64_content = $_POST['file_content'];
$real_content = base64_decode($base64_content);
php端需要把base64的流转换为原来正常的图片流,然后再进行其它操作