前端代码

<!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

  1. 查找max_execution_time，修改其值为60或更大
  2. 查找post_max_zise，修改其值为128M或更大
  3. 查找upload_max_filesize，修改其值为128M或更大

原因

  1. max_execution_time指的是一次请求最长的执行秒数。如果上传文件过大，则可能服务端还没有接收完文件就结束程序了；
  2. post_max_size指的是POST数据所允许的最大大小；
  3. upload_max_filesize指的是上传文件的最大大小。

本文链接：https://www.cnblogs.com/connect/p/thinkphp-ajax-upload.html

ThinkPHP+JQuery实现文件的异步上传的更多相关文章

  1. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  2. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  3. jquery.form.js实现异步上传

    前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...

  4. jquery.form.js 实现异步上传

    前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post&q ...

  5. asp.net使用jquery.form实现图片异步上传

    首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files ...

  6. springMVC的多文件的异步上传实现

    springMVC的MultipartFile与传统的ajax文件上传兼容性不好,采用如下的ajax方法,后台无法获取文件. $.ajax({ url: '/upload', type: 'POST' ...

  7. 【文件上传】jquery之ajaxfileupload异步上传插件

    来自:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用J ...

  8. Jquery FormData文件异步上传 快速指南

    网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...

  9. jquery之ajaxfileupload异步上传插件

    点我下载工程代码由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/d ...

随机推荐

  1. SpringBoot集成Swagger接口管理工具

    手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文档更新交流不及时. 接口返回结果不明确 不能直接在线测试接口,通常需要使用工具,比如postman 接口文档太多,不好管 ...

  2. Jupyter Notebook默认工作路径的修改

    相信每一个学习Python的童鞋,都尝试过Jupyter Notebook,所以我也就不多介绍,真的还不错哎这软件. 不过美中不足的,就是它的默认工作路径,每次打开都是系统盘的Administrato ...

  3. Python之给程序传参数

    1.代码 import sys # 导入系统 args = sys.argv # 获取系统参数 if(args.__len__() == 2): print("%s是世界上最好的语言!&qu ...

  4. PHP 生成器语法

    一般你在迭代一组数据的时候,需要创建一个数据,假设数组很大,则会消耗很大性能,甚至造成内存不足. //Fatal error: Allowed memory size of 1073741824 by ...

  5. OPPO A57 刷机（官方安装包）+完美Root+ 破解主题+屏蔽Root顶部红色框+NV修复

    朋友说她的手机被被人刷后,有许多预装的软件问我能不能处理下,让我装个纯净版. 开机可以看到预装了许多软件,通常想要删除预装软件就必须Root,于是下载刷机精灵,360刷机大师,线刷包之类的软件Root ...

  6. MS SQL作业Schedule的限制注意事项

      最近遇到了一个关于MS SQL作业Schedule下有限制的特殊案例,有一个作业,用户要求执行的时间为:9:30,14:30,16:30, 19:00,于是我设置了两个Schedule,其中一个每 ...

  7. int,int32_t,int64_t

    一.数据类型特别是int相关的类型在不同位数机器的平台下长度不同.C99标准并不规定具体数据类型的长度大小,只规定级别.作下比较: 16位平台 char         1个字节8位short     ...

  8. 前后端分离djangorestframework——路由组件

    在文章前后端分离djangorestframework——视图组件 中,见识了DRF的视图组件强大,其实里面那个url也是可以自动生成的,就是这么屌 DefaultRouter urls文件作如下调整 ...

  9. c/c++ const关键字

    const 在星号的右边:不可以改指针的指向,可以用指针改里面的值 int * const p; const在星号的左边:可以改指针的指向,不可以用指针改里面的值 int const *p; cons ...

  10. Pyqt5+python+ErIC6+QT designer

    Eric6安装及配置 https://blog.csdn.net/weixin_41656968/article/details/80253012 Python3.6+PyQt5+Eric6.0环境配 ...