前端代码

<!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. 章节五、2-Package包和权限修饰符

    一.Package包 为了更好的组织类,java提供了包机制,用于区别类名的命名空间. 包的作用: 1.把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2.如同文件夹一样,包也采用了 ...

  2. Linux 中如何避免 rm -rf /*

    Linux 的删除命令中 rm中没有回收站的概念,一旦文件被删除比较难还原.更可怕的是rm -rf /*,连自己都能删 这命令太危险了,弄错了就核爆了,带来的损失的巨大的.比如 Gitlab.com ...

  3. 智能POS承接口碑点餐FAQ

    1.一体机正餐后付(正餐6.0.0.8),口碑订单在商家后台无优惠(小票上有),但实收不等于订单金额. 原因:订单回流问题(线上线下数据没有及时回流造成的):造成这个问题的操作: 1.在线下加菜线上同 ...

  4. MyBatis笔记----报错Exception in thread "main" org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.ij34.model.UserMapper.selectUser

    信息: Refreshing org.springframework.context.support.ClassPathXmlApplicationContext@41cf53f9: startup ...

  5. [20181007]12cR2 Using SQL Patch.txt

    [20181007]12cR2 Using SQL Patch.txt --//12cR2 已经把sql打补丁集成进入dbms_sqldiag,不是11g的 DBMS_SQLDIAG_INTERNAL ...

  6. 分组统计SQL

    Itpub上遇到一个求助写SQL的帖子,感觉很有意思,于是写出来看看,要求如下: 有个计划表1, 记录物料的年度计划量 有个实际使用情况表2,记录实际使用情况. 最后要出个统计表,把计划和实际的数据结 ...

  7. Python常用的数据类型转换

    在实际开发中.经常要根据需求来转变一些变量的类型. 需要用到以下函数:

  8. windbg调试子进程

    windbg 调试子进程 学习过程中遇到了一个从前未调试过的情景:我正在调试的进程通过CreateProcessW创建了一个子进程,我需要去了解子进程中发生的行为. 那么怎么去调试呢?OD 就有点麻烦 ...

  9. 怎么将后缀为.opt,.frm，.myd，.myi文件还原或者是导入mySQL中

    其实这个问题的解决方案很简单,把这些文件连同这些文件所在的文件夹原封不动地复制到你的 mysql 文件夹下的 data 里面 (在我的电脑里面是D:\xampp\mysql\data), 然后你进my ...

  10. 023合并K个链表并排序

    #include "000库函数.h" struct ListNode { int val; ListNode *next; ListNode(int x) : val(x), n ...