thinkphp5 ajax图片文件异步上传

https://blog.csdn.net/java_qq_99811494/article/details/79681742

原文：http://vtuce.cn/p/78.html

 

html:

1.  
   <form id="form">
2.  
   <input type="file" name="image">
3.  
   </form>

这里依然需要form标签包裹，虽然并不用它来提交。如果非要去掉form，就只能用原生的XMLHttpRequest来实现，但是这家伙是同步的。

jquery:

1.  
   $( document).on("change","#form input",function (e) {
2.  
   upload({
3.  
   url:'vtuce.cn/upload',
4.  
   formNode:this.parentNode,
5.  
   token:'hellothisismytokenstring',
6.  
   sCallback:function (res) {
7.  
   console.log(res);
8.  
   }
9.  
   })
10.  
    });
11.  
    function upload(params) {
12.  
    var data = new FormData(params.formNode);
13.  
    $.ajax({
14.  
    url:params.url,
15.  
    type:'POST',
16.  
    headers:{token:params.token},
17.  
    data:data,
18.  
    dataType:'JSON', //定义返回结果的类型
19.  
    cache: false,
20.  
    contentType:false,
21.  
    processData:false,
22.  
    success:function (res) {
23.  
    params.sCallback && params.sCallback(res);
24.  
    }
25.  
    });
26.  
    }

thinkphp5:

1.  
   public function upload(){
2.  
   $token = Request:: instance()->header( 'token');
3.  
   //$token权限校验。。。
4.  
   $file = Request:: instance()->file( 'image');
5.  
   $type = explode( '/',$file->getInfo('type'));
6.  
   if($type[0] != 'image'){//文件类型过滤
7.  
   return 'error';
8.  
   }
9.  
   if($file->getInfo('size')>102400){//图片大小过滤
10.  
    return 'error';
11.  
    } else{
12.  
    $ext = $type[ 1];
13.  
    $filename = 'somename.'.$ext;
14.  
    move_uploaded_file($file->getInfo( 'tmp_name'),$filename);
15.  
    return 'ok';
16.  
    }
17.  
    }

18.