如何运用Jquery的Ajax上传文件

一般在项目中产品为了客户体验，在文件上传和图片上传时要求我们把文件上传做成体验效果很好的；或者在一个字段比较多的表单提交的时候，其中有文件上传或者图片上传（比如 个人中心中的头像上传，比如资质验证的时候的身份证正反面上传等等..），这个时候就不得不考虑如何使用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