提示:第一篇博客,记录一下平时写的代码~~~
提示:以下是本篇文章正文内容,下面案例可供参考
一、引入jquery.js
<script src="/static/vender/jquery.js"></script>
这里提供了jquery下载地址:https://jquery.com/download/
二、前端
1.html
<form type="post" action="/index.php/user/test" id="forms">
<div>
<label>姓名:</label>
<input type="text" value="" name="name" placeholder="您的姓名" id="name">
</div>
<div>
<label>头像</label>
<input type="file" name="file" id="file">
</div>
<div>
<input type="submit" value="确认" >
</div>
</form>
2.javascript
$("#forms").submit(function(){
var formData = new FormData();
if($('#file').val()==null){
alert("请选择头像");
return false;
}
formData.append('url',$('#file')[0].files[0]); //图片
formData.append('name',$('#name').val());//姓名
$.ajax({
url:"/index.php/user/doTest",
type:"POST",
contentType:false,
data:formData,
cache: false, //上传文件不需要缓存
processData: false // 告诉jQuery不要去处理发送的数据
});
return false; //防止跳转
});
2.后台数据处理
public function doTest(){
$file = $this->request->file('url'); //得到前端传过来的数据
dump($file)
$param = $this->request->param();
$name = $param['name'];
}
此时呢可以f12切换到网络面板进行调试
public function doTest(){
$file = $this->request->file('url'); //得到前端传过来的数据
$param = $this->request->param();
$name = $param['name'];
$saveUrl = Filesystem::disk('photo')->putFile("topic",$file); //文件上传,具体参考tp手册
$saveUrl="/uploads/".$saveUrl; //图片地址拼接
$data = [];
$data['name'] = $name;
$data['url'] = $saveUrl;
die(json_encode($data));
}
总结
第一篇博客到此就结束了~~
总结一下:
1.由于我是用jquery ajax写的所以需要引入jquery插件
2.利用ajax异步需要用到FormData对象并用append插入
3.后台接收数据如果是文件需要file而不是直接param