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 相关文章推荐
PHP完整的日历类(CLASS)
Nov 27 PHP
php 文件夹删除、php清除缓存程序
Aug 25 PHP
PHP数据类型之布尔型的介绍
Apr 28 PHP
thinkphp实现like模糊查询实例
Oct 29 PHP
php字符串函数学习之substr()
Mar 27 PHP
PHP保存session到memcache服务器的方法
Jan 19 PHP
PHP解压tar.gz格式文件的方法
Feb 14 PHP
php实现快速对二维数组某一列进行组装的方法小结
Dec 04 PHP
php使用redis的有序集合zset实现延迟队列应用示例
Feb 20 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
Apr 26 PHP
php实现微信和支付宝支付的示例代码
Aug 11 PHP
PHP读取文件或采集时解决中文乱码
Mar 09 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
Aug 28 #PHP
PHP实现的简单对称加密与解密方法实例小结
Aug 28 #PHP
php检查函数必传参数是否存在的实例详解
Aug 28 #PHP
浅谈Laravel队列实现原理解决问题记录
Aug 19 #PHP
yii2 commands模式以及配置crontab定时任务的方法
Aug 19 #PHP
利用 fsockopen() 函数开放端口扫描器的实例
Aug 19 #PHP
PHPMailer使用QQ邮箱实现邮件发送功能
Aug 18 #PHP
You might like
php取得字符串首字母的方法
2015/03/25 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
Opacity.js
2007/01/22 Javascript
JAVASCRIPT对象及属性
2007/02/13 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
自考毕业生自我鉴定
2013/11/04 职场文书
魅力教师事迹材料
2014/01/10 职场文书
《雨点》教学反思
2014/02/12 职场文书
会计专业求职信范文
2014/03/16 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
爱之链教学反思
2014/04/30 职场文书
村委会贫困证明范文
2014/09/21 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
员工手册编写范本
2015/05/14 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
Redis基本数据类型Set常用操作命令
2022/06/01 Redis