前端代码

<!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. 使用 new XMLHttpRequest() 制作下载文件进度条

    mui 进度控件使用方法: 检查当前容器(container控件)自身是否包含.mui-progressbar类: 当前容器包含.mui-progressbar类,则以当前容器为目标控件,直接显示进度 ...

  2. Android 官方DEMO BasicNetworking

    本示例演示如何使用Android API检查网络连接. Demo下载地址:https://github.com/googlesamples/android-BasicNetworking/#readm ...

  3. Linux中Root密码破解

    1.开机后在选择菜单时按下e进入编辑模式 2.选择linux16这一行,在行末尾添加 rd.break 3.然后Ctrl+x执行.然后进入shell界面: 4.设置密码: 1.重新挂载根目录为读写模式 ...

  4. SQL Server Replication的分发服务器的快照文件夹位置查找

    SQL Server分发服务器配置中,需要配置快照文件夹(Snapshot Folder),用于存储发布的数据和架构文件的工作目录,那么如何查找当前SQL Server数据库服务器的分发服务器的快照文 ...

  5. 查看Windows服务器安装了那些SQL Server组件

    如何查看Windows服务器安装了那些SQL Server组件呢? 最近就遇到这样一个需求,需要知道Windows服务器是否安装了Replication组件,那么有几种方法查看Windows服务器安装 ...

  6. java验证码的制作和验证

    验证码作用: 没有验证码登陆,黑客会更加容易破解你的账号,通过组合码刷机等黑客技术来破取你的密码,有了验证码相当于加了一层很厚的屏障,安全系数很高. 验证码是一种区分用户是计算机和人的公共全自动程序. ...

  7. Debian9安装vim和vim无法右键鼠标粘贴解决方法

    问题描述: Debian9有时候安装的时候没有vim,在centos用习惯了vim 1.Debian安装vim: root@kvm1:/etc/network# apt-get install vim ...

  8. ASP.NET -- WebForm -- HttpResponse 类的方法和属性

    ASP.NET -- WebForm -- HttpResponse 类的方法和属性 1. HttpResponse 类的方法 (1) AddCacheDependency: 将一组缓存依赖项与响应关 ...

  9. 【BZOJ1449】 球队收益

    BZOJ1449 球队收益 Output 一个整数表示联盟里所有球队收益之和的最小值. Sample Input 3 3 1 0 2 1 1 1 10 1 0 1 3 3 1 2 2 3 3 1 Sa ...

  10. 「AHOI / HNOI2017」影魔

    「AHOI / HNOI2017」影魔 题目描述 解决这类比较复杂的区间贡献问题关键在于找到计算的对象. 比如这道题,我们计算的对象就是区间中间的最大值. 对于点\(i\),我们找到左边第一个比他大的 ...