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运行出现Call to undefined function curl_init()的解决方法
Nov 02 PHP
php中global和$GLOBALS[]的分析之一
Feb 02 PHP
PHP之生成GIF动画的实现方法
Jun 07 PHP
php Session存储到Redis的方法
Nov 04 PHP
php中rename函数用法分析
Nov 15 PHP
PHP防止刷新重复提交页面的示例代码
Nov 11 PHP
PHP中addslashes与mysql_escape_string的区别分析
Apr 25 PHP
php接口技术实例详解
Dec 07 PHP
smarty模板的使用方法实例分析
Sep 18 PHP
tp5 实现列表数据根据状态排序
Oct 18 PHP
PHP中mysqli_get_server_version()的实例用法
Feb 03 PHP
PHP+Mysql分布式事务与解决方案深入理解
Feb 27 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
239军机修复记
2021/03/02 无线电
php fckeditor 调用的函数
2009/06/21 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
自荐书封面下载
2013/11/29 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
高中生班主任评语
2014/04/25 职场文书
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫