
我们在做上传文件的时候大多数时候使用input:type=file加上后端文件操作就能满足大多数的项目需求。
有时候需要多图上传或者预览的时候可能要多几步操作或者使用插件,但是有些时候你会遇到一些难以名状的困难。
比如你在二次开发的时候遇到一个混乱的程序员写了一大堆混乱的代码用了一个非常笨重的插件,你想在这样的代码上再修改文件上传那就特别特别难受了。
这时候你可以--直接传数据流
1、前端
前端首先排除FormData对象,这个反正不行,使用FileReader对象
var fileObj = $('input[name="thumbImg"]')[0].files[0];
var reader = new FileReader();
var myData = new FormData();
reader.readAsDataURL(fileObj);
reader.onloadend = function(){
myData.append('img',this.result);
}
reader.onerror=function(){
alert('缩略图读取错误,请换种姿势重试一次!');
}
$.ajax({
url:"ajax.php",
type:"post",
contentType: false,
processData: false,
cache: false,
data:myData,
success:function(r){
var operation = {//操作对象集
1:function(){
alert('保存成功');
location.reload();
},
2:function(){
alert("文件格式错误!");
},
};
operation[r]();
},
error:function(){
alert("网络错误!");
}
})
2、后端
if (!file_exists('shipinimg')) {
@mkdir('shipinimg');
}
$content = $_POST['img'];
list($type, $data) = explode(',', $content);
if (strstr($type, 'image/jpeg') != '') {
$ext = '.jpg';
} elseif (strstr($type, 'image/gif') != '') {
$ext = '.gif';
} elseif (strstr($type, 'image/png') != '') {
$ext = '.png';
}
$imgname = 'shipinimg/' . time() . '_img' . $ext;
$res = file_put_contents($imgname, base64_decode($data));
后端只需要file_put_contents()就可以了
网友评论