HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div class="upload-btn">
  9.     <input type="file" name="file" id="pic" accept="image/gif,image/jpeg,image/x-png"/>
  10.     <span></span>
  11. </div>
  12. </body>
  13. </html>
  14. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
  15. </script>
  16. <script>
  17.     // /上传图片
  18.     //注意这不是click
  19.     $('#pic').change(function(event) {
  20.         var formData = new FormData();
  21.         formData.append("file", $(this).get(0).files[0]);
  22.         $.ajax({
  23.             url:"http://www.examtest.com/pyg/api/addUpLode",
  24.             type:'POST',
  25.             dataType:"json",
  26.             data:  formData,
  27.             cache: false,
  28.             contentType: false,    //不可缺
  29.             processData: false,    //不可缺
  30.             success:function(data){
  31.                 console.log(data)
  32.                 if (data.code=500){
  33.                     alert(data.message)
  34.                 }
  35.                 if (data.code==501){
  36.                     alert(data.message);
  37.                 }
  38.                 if (data.code==200){
  39.                     alert(data.message);
  40.                 }
  41.             }
  42.         });
  43.     });
  44. </script>

控制器代码：

  1. //单文件上传视图
  2.     public function uplode()
  3.     {
  4.         return view();
  5.     }
  6.  
  7. //    接受文件
  8.     public function addUpLode()
  9.     {
  10. //接受参数：
  11. //    $file=request()->file('file');
  12.         $file = $this->request->file('file');
  13.         //验证参数
  14.         if (empty($file)) {
  15.             return json(['code' => 500, 'message' => '照片不可以为空', 'data' => $file]);
  16.         }
  17.         //验证参数
  18.         if ($file) {
  19.             $info = $file->validate(['size' => 15678, 'ext' => 'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads');
  20.             if ($info) {
  21.                 // 成功上传后 获取上传信息
  22.                 // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
  23.                 $filename = $info->getSaveName();
  24.                 /*
  25.            * 这里可以进行替换
  26.            *
  27.            *  */
  28.                 return json(['code' => 200, 'message' => '文件上传成功', 'data' => $file]);
  29.             } else {
  30.                 // 上传失败获取错误信息
  31.                 return json(['code' => 501, 'message' => $file->getError(), 'data' => $file]);
  32.             }
  33.         }
  34.     }

tp5 ajax单文件上传的更多相关文章

  1. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  2. 表单文件上传，ajax文件上传

    原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码  index.jsp(表单文件上传) <form action="sh ...

  3. django项目中form表单和ajax的文件上传功能。

    form表单文件上传 路由 # from表单上传 path('formupload/',apply.formupload,name='formupload/'), 方法 # form表单文件上传 de ...

  4. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  5. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

  6. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  7. ajax与文件上传

    一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...

  8. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  9. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 「CTSC 2011」幸福路径

    [「CTSC 2011」幸福路径 蚂蚁是可以无限走下去的,但是题目对于精度是有限定的,只要满足精度就行了. \({(1-1e-6)}^{2^{25}}=2.6e-15\) 考虑使用倍增的思想. 定义\ ...

  2. C3P0数据库连接池数据库插入中文乱码问题解决

    问题描述 近期修改一个学生信息管理的JavaWeb项目,其数据库连接池使用了C3P0.在实际测试时,发现在学生信息模块添加中文学生信息会在数据库(MySQL)出现中文乱码问题. 如图所示: 问题分析 ...

  3. UITabBarController管理原则

  4. HTC组件介绍及应用 HTML

    转载请注明来源:https://www.cnblogs.com/hookjc/ HTML组件封装了HTML内容,并可以插入到别的HTML文档中.在HTML组件出现以前,在HMTL文档中使用自定义控制唯 ...

  5. iOS中利用CoreTelephony获取用户当前网络状态(判断2G,3G,4G) by徐文棋

    前言: 在项目开发当中,往往需要利用网络.而用户的网络环境也需要我们开发者去注意,根据不同的网络状态作相应的优化,以提升用户体验. 但通常我们只会判断用户是在WIFI还是移动数据,而实际上,移动数据也 ...

  6. Nodejs允许跨域访问

    状况:本地的前端项目(uni-app)以及后台管理(vue-mongo-node)和本地mongo数据库 前台项目端口是8082,后台数据接口是8081. 跨域解决,直接上代码: uni-app的ma ...

  7. ubuntu中codeblocks设置代码黑色主题配色

    说明 网上资料较杂乱,特整理以备留用和他人参阅. 配置文件下载 首先下载配置文件,命名为default.conf. 配置文件 官方配置文件网址 将配置文件替换ubuntu如下路径内的default.c ...

  8. JabRef

    # JabRef 下载 https://www.fosshub.com/JabRef.html # JabRef 安装 自己更改下目录直接安装接可以了 # 新建自己的库, 然后点击保存就可以了. # ...

  9. 【CF888G】Xor-MST(生成树 Trie)

    题目链接 大意 给出\(N\)个点的点权,定义两个点之间的边权为这两个点权的异或和,求这\(N\)个点间的最小生成树. 思路 贪心地想,相连的两个点异或和应当尽量的小. 那么应先从高位确定,因为高位的 ...

  10. 解决/WEB-INF目录下的jsp页面引入webRoot下的Js、css和图片的问题

    通常把jsp页面放在webRoot的/WEB-INF下可以防止访问者直接输入页面. 而webRoot的/WEB-INF下的页面是受保护的,用户无法通过形如http://localhost:8080/t ...