最近在学习PHP时，遇到不知道如何含文件上传的form表单AJAX提交，现在把这些记录下来以备自己后续复习时用：
HTML代码
<form method="POST" class="form form-horizontal" enctype="multipart/form-data" id='editinfo'>
<input type="hidden" value="{$list.id}" name='id'>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span></label>
<div class="formControls col-xs-8 col-sm-9"><img src='{$list.faceimage}' width="120px"
height="160px" id='faceimage'>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="edit_input-text" value="{$list.name}" placeholder="" id="name"
name="name" style="width:400px;height:25px">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
<div class="formControls col-xs-8 col-sm-9 skin-minimal">
<select class="select" name="sex" size="1" style="width:400px;height:30px">
{eq name='list.sex' value='男'}
<option value="男" selected>男</option>
<option value="女">女</option>
{else /}
<option value="男">男</option>
<option value="女" selected>女</option>
{/eq}
</select>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>所教班级</label>
<div class="formControls col-xs-8 col-sm-9">
{volist name='classlist' id='vo'}
{in name='$vo.name' value='$list.class'}
<input type="checkbox" value="{$vo.name}" name='class[]' checked>{$vo.name}
{else /}
<input type="checkbox" value="{$vo.name}" name='class[]'>{$vo.name}
{/in}
{/volist}
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>上传头像</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="file" name='faceimage' accept="image/jpeg,image/png">
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="button" value=" 提交 "
id='button'>
</div>
</div>
</form>
script部分
<script>
$(function () {
$('#button').on('click', function () {
var data=new FormData(document.getElementById("editinfo"));
$.ajax({
type: "POST", //提交的类型是POST
url: "{:url('editUserOperation')}",
data: data, //FormData序列化不能用serialize()序列化，不然不能传递file,
dataType: "json", //数字类型JSON
processData:false,
contentType:false,
success: function (data) {
alert(data.message);
}
});
})
})
</script>
后台处理部分：
public function editUserOperation(request $request)
{
$this->isTeacherLogin();
$data = $request->param(true);
foreach ($data as $key => $value) {
if ($key == "faceimage") { //判断file的input有没有选择文件
$file = request()->file('faceimage');
$info = $file->move("../uploads/");
$url = $info->getSaveName(); //文件上传后的路径和文件名
$data[$key] = $url;
}else{
$data[$key] = $value;
}
}
$condition = ['id' => $data['id']];
$result = TeacherModel::update($data, $condition);
if ($result == true) {
return ['message' => "修改成功"];
} else {
return ['message' => "修改失败"];
}
return ['message' => "成功"];
}
这是我初学TP5.1学习资料，大神们勿喷！
最新评论