TP5通过Ajax上传文件或图片示例

文件上传，司空见惯。本例主要通过Ajax将文件上传至服务器，thinkphp5后端接收数据后进行简单存储的过程，希望对新手朋友有所帮助。

一、前端页面部分：

<section style="background-color:#fff">
<ul>
<li class="clearfix consumption_li">
<p class="fl">联系电话</p>
<p class="fr"><input type="text" id="user_phone" placeholder="请输入联系电话"></p>
</li>
<li class="clearfix consumption_li">
<p class="fl">具体位置</p>
<p class="fr"><input type="text" id="user_address" placeholder="请输入具体位置"></p>
</li>
<li class="clearfix consumption_li">
<p class="fl">详细描述</p>
<p class="fr"><input type="text" id="user_desc" placeholder="请输入废品种类、数量等描述"></p>
</li>
<li class="clearfix consumption_li">
<input type="file" id="upload_img">
</li>
</ul>
</section>
<button class="submit" id="submitBtn">
提交
</button>
<script src="__TEMP__/{$style}/static/js/jquery.min.js"></script>
<script src="__TEMP__/{$style}/static/js/layer.js"></script>
<script>
$("#submitBtn").on("click",function(){
var formdata = new FormData();
var img_file = document.getElementById("upload_img");
var fileObj = img_file.files[0];
var user_phone = $("#user_phone").val();
var user_address = $("#user_address").val();
var user_desc = $("#user_desc").val();
formdata.append("user_phone",user_phone);
formdata.append("user_address",user_address);
formdata.append("user_desc",user_desc);
formdata.append("thumb",fileObj);
if(user_phone == '' || user_address == ''){
var tips ="手机号或地址不能为空"
sendtips(tips);
}
$.ajax({
url:"{:__URL('APP_MAIN/Recycle/index')}",
type:"POST",
data:formdata,
async:false,
processData:false,
contentType:false,
success:function (result) {
if(result.code == 1){
sendtips(result.data.message);
setTimeout(function () {
windows.location.href = "{:__URL('APP_MAIN')}";
},2000);
}else{
sendtips(result.data.message);
}
}
})
})
//页面提示
function sendtips(content) {
layer.open({
content: content
,skin: 'msg'
,time: 3 //3秒后自动关闭
});
}
</script>

简单页面示例，可以看出这是一个表单，包含了字符串和文件。

其中Ajax上传文件时需要注意的是46、47、48这三行代码。

二、后端接收文件部分：

if($this->request->isAjax()){
$data['user_phone'] = $this->request->post('user_phone','','trim');
$data['address'] = $this->request->post('user_address','','trim');
$data['recycle_desc'] = $this->request->post('user_desc','','trim');
$data['user_id'] = $user_id;
$user = Db::name("sys_user")->where(['uid'=>$user_id])->field('user_name,uid,nick_name')->find();
if(emptyempty($user)){
return AjaxReturn(0,['message'=>"未登录,请先登录"]);
}
$data['user_name'] = emptyempty($user['user_name'])?$user['nick_name']:$user['user_name'];
if(emptyempty($data['user_phone']) || emptyempty($data['address']) || emptyempty($data['recycle_desc'])){
return AjaxReturn(0,['message'=>"信息不完善"]);
}
$file = $this->request->file('thumb');
if($file){
$file_path = ROOT_PATH . 'upload' . DS . 'recycle';
$info = $file->move($file_path);
if($info){
$file_name = $info->getSaveName();
$file_name = str_replace("\\","/",$file_name);
$data['thumb'] = "/upload/recycle/".$file_name;
}else{
return AjaxReturn(0,['message'=>$file->getError()]);
}
}