同步:

前台页面:

        <div class="form-div">
<form action="{:url('index/i/edit_head_img_cl')}" enctype="multipart/form-data" method="post">
<input type="file" name="image" accept="image/gif, image/jpg ,image/png"/> <br>
<p style="color:red">仅支持不大于5m,后缀为jpg,png,gif的图片</p>
<input type="submit" value="上传" />
</form>
</div>

后台页面:

    //处理头像修改
public function edit_head_img_cl(){ //检验用户是否登陆,并获取user_id
if($this->check_log['ok'] == '-1'){
$this->error($this->check_log['error']);
}
$user_id = $this->check_log['id'];
echo '';
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('image');
echo '';
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->validate(['size'=>,'ext'=>'jpg,png,gif'])->move('static/uploads/');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
/* echo $info->getExtension();
// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
echo $info->getSaveName();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
echo $info->getFilename(); */
$ing_url = $info->getSaveName();
//把url写进头像
$res = UserDB::update(['id'=>$user_id,'head_img'=>$ing_url]);
if(!$res){
echo '系统故障,更换头像失败';
}else{
echo '<script type="text/javascript">parent.location.reload();</script>';
} }else{
// 上传失败获取错误信息
echo $file->getError();
}
}else{
echo request()->post('image');
}
}

异步:

前台页面:

                            <tr>
<td>头像(异步上传):</td>
<td>
{if $user.head_img == ''}
<img src="__STATIC__/uploads/{$site_setup.default_img}" style="width: 50px;height: 50px;" class="head-img">
{else/}
<img src="__STATIC__/uploads/{$user.head_img}" style="width: 50px;height: 50px;" class="head-img">
{/if}
</td>
<td>
<input type="file" multiple="multiple" id="inputfile" name="" class="photo"> </td>
</tr>
    //图片异步上传
$("#inputfile").change(function(){
console.log($(this).val());
/*alert(1);*/
var file = $('#inputfile')[].files[];
var data = new FormData();
/* console.log($('#inputfile'));*/
data.append('image', file); $.ajax({
url:"{:url('index/i/edit_head_img_cl_yb')}", /*去过那个php文件*/
type:'POST', /*提交方式*/
data:data,
dataType: "json",
cache: false,
contentType: false, /*不可缺*/
processData: false, /*不可缺*/
mimeType: "multipart/form-data",
success:function(data){
if(data.ok == ''){
//把头像换成新的
$(".head-img").attr("src","__STATIC__/uploads/"+data.url);
}
alert(data.message);
},
error:function(data){
alert('上传出错');
}
});
});

后台页面:

    //处理头像修改(异步)
public function edit_head_img_cl_yb(){ //检验用户是否登陆,并获取user_id
if($this->check_log['ok'] == '-1'){
return ['ok'=>'-1','message'=>$this->check_log['error']];
}
$user_id = $this->check_log['id']; // 获取表单上传文件 例如上传了001.jpg
$file = request()->file('image'); // 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->validate(['size'=>,'ext'=>'jpg,png,gif'])->move('static/uploads/');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
/* echo $info->getExtension();
// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
echo $info->getSaveName();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
echo $info->getFilename(); */
$ing_url = $info->getSaveName();
//把url写进头像
$res = UserDB::update(['id'=>$user_id,'head_img'=>$ing_url]);
if(!$res){
return ['ok'=>'-1','message'=>'系统故障,更换头像失败']; }else{
return ['ok'=>'','message'=>'上传成功!','url'=>$ing_url];
} }else{
// 上传失败获取错误信息
return ['ok'=>'-1','message'=>$file->getError()];
}
}else{
return ['ok'=>'-1','message'=>'没有接收到图片!'];
}
}

thinkphp的同步上传图片和异步上传图片的更多相关文章

  1. Jquery实现异步上传图片

    利用jQuery的ajax函数就可以实现异步上传图片了.一开始我是想在处理程序中,直接用context.Request.Files来获取页面中的input file,但是不知道为什么一次获取不了.网上 ...

  2. 异步上传图片,光用jquery不行,得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

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

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

  4. 利用KindEditor的uploadbutton实现异步上传图片

    利用KindEditor的uploadbutton实现异步上传图片 异步上传图片最经常使用的方法就是图片在iframe中上传.这样仅仅须要刷新iframe.而不用刷新整个页面.     KindEdi ...

  5. php结合jquery异步上传图片(ajaxSubmit)

    php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  6. C# 异步上传图片案例

    好久没写博客了,都感觉自己快堕落了!今天随性写一篇关于异步上传图片的程序及插件! 说是程序及插件,其实程序占大头,所谓的插件只是两个JS.分别为:jquery.html5upload.js 和 jqu ...

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

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

  8. Ajax实现异步上传图片

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

  9. MVC异步上传图片到本地/服务器

    这两天朋友问我,有没有异步上传图片到本地/服务器这种demo,他有用, 我就想,好吧, 那刚好周末了,整理一套出来. 主要用到的是jquery uploadify 这个juqery的插件 ,可以无刷新 ...

随机推荐

  1. 【LInux01】学习Linux课程体系

    知识 =>技能   需要大量的练习  相当于复盘 要有成就感 在一个领域深挖,再迁移到其他领域 1.两周以后的知识留存率: 主动学习: 动手实践:40% 讲给别人听:70% 写博客:是写教程,便 ...

  2. Java连载76-基础数据类型包装类型及其方法简介

    一.java中八种基本数据类型对应的包装类型 基本数据类型      包装类型 byte                    java.lang.Byte short                ...

  3. Log4net实用说明

    Log4net实用说明 Appender Filter Layout Logger ObjectRender Repository PatterLayout格式化字符表 配置文件说明 Appender ...

  4. Spring-Cache手动清缓存

    Spring Cache 手动清Redis缓存 注册cacheRedisTemplate 将 cache 的 RedisTemplate 注册为Bean @Bean(name = "cach ...

  5. webpack 代理问题

    devServer host: '0.0.0.0' 或者是ip 形式的 ,proxy 中 的 target,host 需要为ip形式的地址, host: 'aa.a.com' 为字符形式的 ,prox ...

  6. JavaScript 继承 -JavaScript高级程序设计

    oo(Object Oriented)面向对象 许多oo语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.函数没有签名,在ecmascript中无法实现接 ...

  7. day:3.9基础复习

    1.不要在模块之间相互调用,否则会出现麻绳现象,避免循环导入. ==:用来判断值是否相等(分别指向两个空间,但是空间里面的内容相同) is:判断指向是否相等. 例: a=[,,] b=[,,] a== ...

  8. java字符串操作扩充:灵活截取字符串

    java字符串操作扩充:灵活截取字符串 public class StringUtil { static int varlen1; static int varlen2; static String ...

  9. vuejs在解析时出现闪烁的原因及防止闪烁的方法

    原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于Java ...

  10. BZOJ3932 CQOI2015 任务查询系统 - 主席树,离散化

    记录下自己写错的地方吧 1. 区间可能有重复 2. 没有出现的坐标也要计入version (因为询问里可能会有) #include <bits/stdc++.h> using namesp ...