一般在项目中产品为了客户体验,在文件上传和图片上传时要求我们把文件上传做成体验效果很好的;或者在一个字段比较多的表单提交的时候,其中有文件上传或者图片上传(比如 个人中心中的头像上传,比如资质验证的时候的身份证正反面上传等等..),这个时候就不得不考虑如何使用ajax
上传文件了。
下面的例子以Laravel
框架中为例(因为目前兄弟会主要以每个Laravel-LTS
版本来做实战项目(商业项目))。
一、定义路由
以Restful API
为例(ajax
提交方式为异步post
,会默认进入store
方法)..
Route::resource('/upload','PhotoController');
二、试图配置
由于是例子,起名比较随意(请大家忽略)..
<img src="{{url('/file.png')}}" id="pic" style="cursor: pointer;"/>
<input type="file" name="photo" id="photo_upload" style="display: none;" />


JS块
<script type="text/javascript">
// 这里是Ajax 全局token
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// 图片上传
$('#pic').on('click', function(){
$('#photo_upload').trigger('click');
$('#photo_upload').on('change', function(){
var obj = this;
var formData = new FormData();
formData.append('photo', this.files[0]);
$.ajax({
url: 'upload',
type: 'post',
data: formData,
// 因为data值是FormData对象,不需要对数据做处理
processData: false,
contentType: false,
beforeSend:function(){
// 菊花转转图
$('#pic').attr('src', '/load.gif');
},
success: function(data){
if(data['ServerNo']=='200'){
// 如果成功
$('#pic').attr('src', '/uploads/'+data['ResultData']);
$('input[name=pic]').val(data);
$(obj).off('change');
}else{
// 如果失败
alert(data['ResultData']);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var number = XMLHttpRequest.status;
var info = "错误号"+number+"文件上传失败!";
// 将菊花换成原图
$('#pic').attr('src', '/file.png');
alert(info);
},
async: true
});
});
});
</script>
三、后台逻辑
/**
* 文件上传 demo
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
$file = $request->file('photo');
// 验证
$check = $this->checkFile($file);
if(!$check['status']){
return response()->json(['ServerNo' => '400','ResultData' => $check['msg']]);
}
// 获取文件路径
$transverse_pic = $file->getRealPath();
// public路径
$path = public_path('uploads');
// 获取后缀名
$postfix = $file->getClientOriginalExtension();
// 拼装文件名
$fileName = md5(time().rand(0,10000)).'.'.$postfix;
// 移动
if(!$file->move($path,$fileName)){
return response()->json(['ServerNo' => '400','ResultData' => '文件保存失败']);
}
// 这里处理 数据库逻辑
/**
*Store::uploadFile(['fileName'=>$fileName]);
**/
return response()->json(['ServerNo' => '200','ResultData' => $fileName]);
}
private function checkFile($file)
{
if (!$file->isValid()) {
return ['status' => false, 'msg' => '文件上传失败'];
}
if ($file->getClientSize() > $file->getMaxFilesize()) {
return ['status' => false, 'msg' => '文件大小不能大于2M'];
}
return ['status' => true];
}
这样一个基本的Jquery文件上传就出来了。。
本文为作者原创,允许转载,转载后请以链接形式说明文章出处.
如转载但不标明来源,后果自负。
-- 大 丢 Ge