thinkphp ajaxfileupload实现异步上传图片的示例


Posted in PHP onAugust 28, 2017

thinkphp开发图片上传,图片异步上传是目前比较方便的功能,这里我就不写css文件了,将代码写出来。引入核心文件下载https://github.com/carlcarl/A...

HTML

下面首先在html页面引入相关js资源

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传</title> 
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script> 
</head>
<body>
</body>
</html>

接下来在body中创建相关div

<label class="title w100">封面图片:</label>
<div class="f_l">
 <label class="fileupload" onclick="upd_file(this,'image_file');">
  <input type="file" class="filebox" name="image_file" id="image_file"/>
  <!--上传成功后图片会给value赋值图片路径,以便于form表单提交数据-->
  <input type="hidden" name="image" value="">      
 </label>
 <label class="fileuploading hide" ></label>     
</div>
<div class="blank15"></div>
<!--上传成功后图片会在这里显示否则是默认图片-->
<img id="image" src="/Public/images/empty_thumb.gif" />

解释一下:

其中upd_file(this,'image_file')不可缺少

其中隐藏的input 是用于上传成功后赋值图片路径,以便于form表单提交数据

接下来在html中编辑javascript脚本以便于传递和提交图片功能

<script>
function upd_file(obj,file_id){ 
$("input[name='"+file_id+"']").bind("change",function(){   
 $(obj).hide();
 $(obj).parent().find(".fileuploading").removeClass("hide");
 $(obj).parent().find(".fileuploading").removeClass("show");
 $(obj).parent().find(".fileuploading").addClass("show");
  $.ajaxFileUpload
  (
   {
    url:'/index.php/home/avatar/app_upload_image',//上传图片处理文件
    secureuri:false,
    fileElementId:file_id,
    dataType: 'json',
    success: function (data, status)
    {
      $(obj).show();
      $(obj).parent().find(".fileuploading").removeClass("hide");
     $(obj).parent().find(".fileuploading").removeClass("show");
     $(obj).parent().find(".fileuploading").addClass("hide");
      if(data.status==1)
      {
       $("#image").attr("src",data.thumb_url+"?r="+Math.random());        
       $("input[name='image']").val(data.url);//返回json后将隐藏input赋值
      //$("#img_url").html('<input type="hidden" name="img_url" value="'+ path.path +'" />');
      }
      else
      {
       $.showErr(data.msg);
      }
    },
    error: function (data, status, e)
    {
     $.showErr(data.responseText);;
     $(obj).show();
     $(obj).parent().find(".fileuploading").removeClass("hide");
     $(obj).parent().find(".fileuploading").removeClass("show");
     $(obj).parent().find(".fileuploading").addClass("hide");
    }
   }
  );
  $("input[name='"+file_id+"']").unbind("change");
}); 
}
<script>

thikphp 中创建方法 app_upload_image()

function app_upload_image($maxSize=52428800){
  $id=session('id');
  $config=array(
   'rootPath' =>'Upload',   //文件上传保存的根路径
   'savePath' =>'/avatar/', 
   'exts'  => array('jpg', 'gif', 'png', 'jpeg','bmp'),
   'maxSize' => $maxSize,
   'autoSub' => true,
   );
  $upload = new \Think\Upload($config);// 实例化上传类
  $z = $upload->uploadOne($_FILES['image_file']);
  if($z) {
  //拼接图片的路径名
    $img='/Upload'.$z['savepath'].$z['savename'];
    $_POST['image_file']=$img;
    //获取上传图片绝对路径
    $imgsrc=$_SERVER['DOCUMENT_ROOT'].__ROOT__.$_POST['image_file'];
    $image = new \Think\Image(); 
    $image->open($imgsrc);
    //将图片裁剪为400x400并保存为corp.jpg
    $image->thumb(205, 160,\Think\Image::IMAGE_THUMB_CENTER)->save($imgsrc);

   $this->ajaxReturn(array("thumb_url"=>$img,"url"=>$img,"status"=>1));
  }
 }

OK这样就好了,首先和大家说一下,如果ajaxfileupload.js报错程序是不会跑通的,如果你的程序报错就检查你的ajaxfileupload文件是不是版本的问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
cache_lite试用
Feb 14 PHP
PHP数据缓存技术
Feb 14 PHP
php记录日志的实现代码
Aug 08 PHP
教你如何使用php session
Oct 28 PHP
php命名空间学习详解
Feb 27 PHP
php把数组值转换成键的方法
Jul 13 PHP
PHP实现获取并生成数据库字典的方法
May 04 PHP
PHP中子类重载父类的方法【parent::方法名】
May 06 PHP
php简单统计在线人数的方法
May 10 PHP
PHP实现接收二进制流转换成图片的方法
Jan 10 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
May 06 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
Jan 25 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
Aug 28 #PHP
PHP实现的简单对称加密与解密方法实例小结
Aug 28 #PHP
php检查函数必传参数是否存在的实例详解
Aug 28 #PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
Aug 28 #PHP
Laravel学习教程之从入口到输出过程详解
Aug 27 #PHP
PHP使用栈解决约瑟夫环问题算法示例
Aug 27 #PHP
PHP基于递归实现的约瑟夫环算法示例
Aug 27 #PHP
You might like
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
js打造数组转json函数
2015/01/14 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python numpy元素的区间查找方法
2018/11/14 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Python中Selenium模块的使用详解
2020/10/09 Python
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
生日派对邀请函
2014/01/13 职场文书
施工员岗位职责
2014/03/16 职场文书
美化环境标语
2014/06/20 职场文书
标准毕业生自荐信
2014/06/24 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
Redis+AOP+自定义注解实现限流
2022/06/28 Redis