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.