TP5使用ajax上传图片,及实现预览
1、html代码
<input id="img" style="float:left;" value="" name="img" type="file">
<img id="imgsrc" height="30" src="">
2、js代码
$().ready(function (){
//判断图片是否已经上传,如果上传则删除图片
if( $('#imgsrc').attr('src') !== ""){
var data = $('#imgsrc').attr('src');
$.ajax({
type:"post",
dataType:"json",
data:{data:data},
url:"{:url('Cate/delimg')}",
}
});
$('#img').change(function () {
var formdata = new FormData();
//因为不是整个表单数据,所以用append模拟表单信息
//以下两种方式都可以
//formdata.append("img", document.getElementById("img").files[0]);
formdata.append("img", $("#img")[0].files[0]);
$.ajax({
type:"post",
dataType:"json",
data:formdata,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
url:"{:url('Cate/upimg')}",
success:function (data) {
var data = '/cate/uploads/' + data;
$('#imgsrc').attr('src',data);
}
});
3、PHP代码
public function delimg(){
if(request()->isAjax()) {
$data = input('data');
//传过来的路径最前面的‘/’会让路径不对,删除不成功,
$res = unlink(substr($data,1));
if ($res) {
echo 1;
}else{
echo 2;
}
}else{
$this->error('非法操作');
}
}
public function upimg(){
// 获取表单上传文件
$file = request()->file('img');
if (empty($file)) {
return;
}
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS .'cate'. DS . 'uploads');
if ($info) {
$data = $info->getSaveName();
echo json_encode($data);//不转为json格式,不能正确接收
} else {
// 上传失败获取错误信息
echo $file->getError();
}
}