前端代码

<!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. Flutter 布局详解

    本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局. 1. 简介 在介绍Flutter布局之前,我们得先了解Flutter中的一些布局相关 ...

  2. HDFS快速入门

    一.简介 HDFS[Hadoop Distributed File System]是Hadoop组件中的分布式存储系统,提供高可靠性.高扩展性和高吞吐率的数据存储服务. 二.存储模型 1.文件线性切割 ...

  3. Spark之UDF

    package big.data.analyse.udfudaf import org.apache.spark.sql.types.{IntegerType, StringType, StructF ...

  4. SQL Server OPTION (OPTIMIZE FOR UNKNOWN) 测试总结

      关于SQL Server的查询提示OPTION (OPTIMIZE FOR UNKNOWN) ,它是解决参数嗅探的方法之一. 而且对应的SQL语句会缓存,不用每次都重编译.关键在于它的执行计划的准 ...

  5. 使用FormData进行Ajax请求上传文件

    Servlet3.0开始提供了一系列的注解来配置Servlet.Filter.Listener等等.这种方式可以极大的简化在开发中大量的xml的配置.从这个版本开始,web.xml可以不再需要,使用相 ...

  6. 自动化测试基础篇--Selenium iframe定位问题

    摘自https://www.cnblogs.com/sanzangTst/p/7473437.html 有时候我们在定位的途中发现一个现象,元素就在那儿,不离不去,但是我们怎么整就是定不了位,这个时候 ...

  7. Elasticsearch拼音分词和IK分词的安装及使用

    一.Es插件配置及下载 1.IK分词器的下载安装 关于IK分词器的介绍不再多少,一言以蔽之,IK分词是目前使用非常广泛分词效果比较好的中文分词器.做ES开发的,中文分词十有八九使用的都是IK分词器. ...

  8. c/c++连通图的遍历(深度遍历/广度遍历)

    连通图的遍历(深度遍历/广度遍历) 概念:图中的所有节点都要遍历到,并且只能遍历一次. 深度遍历 广度遍历 深度遍历 概念:从一个给定的顶点开始,找到一条边,沿着这条边一直遍历. 广度遍历 概念:从一 ...

  9. python3+beautifulsoup4爬取汽车信息

    import requests from bs4 import BeautifulSoup response = requests.get("https://www.autohome.com ...

  10. HTML 页面自动刷新

    学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能 <meta http-equiv="Refresh" ...