前端代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>ThinkPHP+JQuery实现文件的异步上传</title> </head> <body> <form id="ajax-upload-demo" enctype="multipart/form-data"> <label>选择文件:</label> <input type="file" name="image"><br><br> <a href="javascript:uploadFile();">上传</a> </form> <br><p id="tips"></p> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script> var isUploading = false; // 上传文件 function uploadFile(){ var form = document.getElementById('ajax-upload-demo'); if(isUploading) { alert('文件正在上传...'); return false; } $.ajax({ url: '/index/index/uploadApi', type: 'POST', cache: false, data: new FormData(form), processData: false, contentType: false, dataType: 'json', beforeSend: function () { isUploading = true; }, success: function (json) { var arr = JSON.parse(json); if(arr.errcode == 10000){ // 上传成功 alert('上传成功'); var url = arr.data.url; var tips = "<a href='" + url + "' target='_blank'>点击查看</a>"; $("#tips").empty().append(tips); }else{ // 上传失败 alert('上传失败'); } isUploading = false; } }); } </script> </body> </html>
效果图:
PHP代码
<?php namespace app\index\controller; use think\Controller; class Index extends Controller { // 上传表单页面 public function index() { return $this->fetch(); } // 上传文件接口 public function uploadApi(){ // 获取文件 $file = request()->file('image'); if($file){ // 校验数组 $validateArr = [ 'ext' => 'jpg,jpeg,gif,png,bmp' ]; // 文件的本地存储路径 $path = ROOT_PATH . 'public' . DS . 'upload'; // 校验并移动 $info = $file->validate($validateArr)->move($path); // 检查移动结果 if($info){ // 上传成功 // 输出 jpg #echo $info->getExtension(); // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg #echo $info->getSaveName(); // 输出 42a79759f284b767dfcb2a0197904287.jpg #echo $info->getFilename(); // 文件的原文件名 $sourceInfo = $info->getInfo(); $sourceName = $sourceInfo['name']; // 拼装url $url = '/upload/'.$info->getSaveName(); $url = str_replace('\\', '/', $url); // Windows下替换路径分隔符 // other some operations ... // 返回json,告知客户端上传结果 $json = json_encode([ 'errcode' => '10000', 'errmsg' => 'Upload success', 'data' => [ 'url' => $url ] ]); }else{ // 上传失败,返回json,告知客户端 $json = json_encode([ 'errcode' => '20002', 'errmsg' => 'Upload failed', ]); } }else{ // 未上传文件 $json = json_encode([ 'errcode' => '20001', 'errmsg' => 'File not uploaded', ]); } return $json; } }
上传测试
1. 上传一张图片
2. 上传成功
3. 点击查看
4. 查看图片
5. 查看上传目录
可能出现的错误
1. PHP的上传限制
解决方法
打开 PHP 的配置文件 php.ini
- 查找
max_execution_time
,修改其值为60
或更大 - 查找
post_max_zise
,修改其值为128M
或更大 - 查找
upload_max_filesize
,修改其值为128M
或更大
原因
max_execution_time post_max_size upload_max_filesize
本文链接:https://www.cnblogs.com/connect/p/thinkphp-ajax-upload.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Html5实现文件异步上传
- Html5实现文件异步上传
- Android 中实现异步轮询上传文件
- AjaxUpload v1.3.0 发布,Javascript 异步上传插件
- asp.net使用H5新特性实现异步上传的示例
- axios上传图片,koa2接收保存上传的图片,lrz在上传前压缩图片
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
迎接互联网的明天
邹静 / 电子工业 / 2011-6 / 55.00元
《迎接互联网的明天-玩转3D Web(附盘)》,全书共5章,第1章主要阐述了国内外空前繁荣的3D互联网技术领域,以及这些领域透射出来的潜在商机;第2章主要用当下比较流行的Flash编程语言ActionScript 3,来向大家介绍面向对象编程语言的思想概念,以及一些3D渲染技术的入门知识;第3章注重建模知识的运用,主要运用WireFusion和3ds Max来制作3D网页;第4章主要介绍3D游戏编......一起来看看 《迎接互联网的明天》 这本书的介绍吧!