直接上代码

PHP代码如下

/**
* 上传
*/
public function upload_photo(){
$file = $this->request->file('file');
$uid = session('ydyl_weixin_user.id');
// if(empty($uid)){
// return ['code'=>404,'msg'=>'用户未登录'];
// }
if(!empty($file)){
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->validate(['size'=>1048576,'ext'=>'jpg,png,gif'])->rule('uniqid')->move(ROOT_PATH . 'public' . DS . 'uploads');
$error = $file->getError();
//验证文件后缀后大小
if(!empty($error)){
dump($error);exit;
}
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
$info->getExtension();
// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
$info->getSaveName();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
$photo = $info->getFilename(); }else{
// 上传失败获取错误信息
$file->getError();
}
}else{
$photo = '';
}
if($photo !== ''){
return ['code'=>1,'msg'=>'成功','photo'=>$photo];
}else{
return ['code'=>404,'msg'=>'失败'];
}
}

HTML代码如下

<div class="upload-btn">
<input type="file" name="pic1" id="pic" accept="image/gif,image/jpeg,image/x-png"/>
</div>
<script>
//上传图片
$('#pic').change(function(event) {
var formData = new FormData();
formData.append("file", $(this).get(0).files[0]);
$.ajax({
url:'http://www.juplus.cn/vdma/index/ydyl/upload_photo',
type:'POST',
data:formData,
cache: false,
contentType: false, //不可缺
processData: false, //不可缺
success:function(data){
console.log(data)
}
});
});
</script>
有写错的请私信我,谢谢

ajax异步上传图片(TP5)的更多相关文章

  1. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  2. 使用Ajax异步上传图片的方法(html,javascript,php)

    前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...

  3. ajax异步上传图片&SpringMVC后台代码

    function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post& ...

  4. ajax异步上传图片三种方案

    转自:http://www.jb51.net/article/51180.htm 注:自己尝试了前两种,都可用: 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效 ...

  5. thinkPHP利用ajax异步上传图片并显示、删除

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  6. springmvc+ajax异步上传图片

    1.javaweb传统的上传图片方式就是通过form表单提交 <form action="#" method="post" enctype="m ...

  7. thinkphp5 不使用form,用input+ajax异步上传图片

    不支持$this->request->file()获取图片 后台接收文件请使用$_FILE 正文开始: HTML <div class="upload"> ...

  8. js 原生 ajax 异步上传图片

    <script type="text/javascript"> function upload() { var file1 = document.getElementB ...

  9. Ajax实现异步上传图片

    要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

随机推荐

  1. IntelliJ Idea设置单击打开文件或者双击打开文件、自动定位文件所在的位置

  2. 基于Helm和Operator的K8S应用管理的分享

    一.为啥要用helm 对于一些微服务架构来说,会有不同的服务在上面运行,你可能要管理诸如deployment.service.有状态的Statefulset.权限的控制等等.你会发现,部署应用后还会有 ...

  3. Linux上部署多个tomcat端口设置

    在Linux上部署多个tomcat主要是防止端口冲突的问题, tomcat服务器需配置三个端口才能启动,安装时默认启用了这三个端口,当要运行多个tomcat服务时需要修改这三个端口,不能相同.端口一: ...

  4. 基本数据类型dict

    1. 字典 dict 用{}来表示 键值对数据 {key:value} 唯一性 键 都必须是可哈希的 不可变的数据类型就可以当做字典中的键 可哈希不可变的数据类型:int str tuple bool ...

  5. globals() 和 locals() 函数

    globals() 和 locals() 函数 根据调用地方的不同,globals() 和 locals() 函数可被用来返回全局和局部命名空间里的名字. 如果在函数内部调用 locals(),返回的 ...

  6. summary_22rd Nov 2018

    一. 列表:记录同种属性的多个值 定义:在[]中用逗号分隔开多个任意的值 类型转换:L=list( )  括号中的内容必须是可迭代类型,包括字符串,列表,字典等 常用操作和内置方法: 1.按照索引位置 ...

  7. swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了

    我给swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了,哪里出了问题呢? 添加参数 autoplayDisableOnInteraction : false,

  8. linux下正则表达式学习

    下表包含了元字符的完整列表以及它们在正则表达式上下文中的行为: 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个 向后引用.或一个八进制转义符.例如,'n' 匹配字符 " ...

  9. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  10. 用socket.io将Node后台与M站相联系

      目的:用socket.io将Node后台与M站相联系,实现当Node后台添加一条数据时,调用该接口的M站不用手动刷新自动出现新增的数据     具体实现:当在后台系统position列表中添加/修 ...