前端代码

<!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. Django APP打包重用

    引言 有时候,我们需要将自己写的app分发(dist)给同事,分享给朋友,或者在互联网上发布,这都需要打包.分发我们的app. Django的子系统重用是基于app级别的.也就是一个项目可以包含多个互 ...

  2. Git多人协作常用命令

    Git多人协作工作模式: 首先,可以试图用git push origin branch-name推送自己的修改. 如果推送失败,则因为远程分支比你的本地更新早,需要先用git pull试图合并. 如果 ...

  3. .net、mono和C#

    .net wiki:en  chs .net版本 公共语言运行时(CLR) 发布时间 随同分发的Visual Studio 预装于windows系统 支持的windows系统 1.0 1.0 2002 ...

  4. windows网络编程中文 笔记（二）

    IPv4 地址段 IPv4地址类别 种类 网络部分 第1个数字 端点数字 A  8位  0-127  16777216 B  16位  128-191  65526 C  24位  193-223   ...

  5. ORACLE获取SQL绑定变量值的方法总结

      本文总结一下ORACLE数据库中如何获取SQL绑定变量值的方法,在SQL优化调优过程中,经常会用到这方面的知识点.在此梳理.总结一下,方面日后查找.翻阅. 方法1:查询V$SQL V$SQL视图中 ...

  6. c/c++ 标准库 插入迭代器 详解

    标准库 插入迭代器 详解 插入迭代器作用:copy等函数不能改变容器的大小,所以有时copy先容器是个空的容器,如果不使用插入迭代器,是无法使用copy等函数的. 例如下面的代码就是错误的: list ...

  7. python中的猴子补丁Monkey Patch

    python中的猴子补丁Monkey Patch 什么是猴子补丁 the term monkey patch only refers to dynamic modifications of a cla ...

  8. 【PAT】B1007 素数对猜想

    素数筛筛出规定范围内的所有素数存入数组 遍历数组,如果满足于后边的差2,计数器加加 #include <cstdio> const int maxn = 10000001; int pri ...

  9. Java运行Jar包内存配置

    java -jar -Xms1024m -Xmx1536m -XX:PermSize=128M -XX:MaxPermSize=256M car.jar 说明: 1.堆内存:最小1024M,最大153 ...

  10. 【English】20190308

    hiring雇佣['haɪərɪŋ]   across跨越  field sales区域销售[fild]  [seɪlz] The Google Cloud team is growing and w ...