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 相关文章推荐
火车头采集器3.0采集图文教程
Mar 17 PHP
php面向对象全攻略 (九)访问类型
Sep 30 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
Nov 01 PHP
PHP抽象类 介绍
Jun 13 PHP
有关于PHP中常见数据类型的汇总分享
Jan 06 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
Sep 12 PHP
PHP处理会话函数大总结
Aug 05 PHP
微信支付开发维权通知实例
Jul 12 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
Jun 10 PHP
PHP Socket网络操作类定义与用法示例
Aug 30 PHP
Thinkphp集成抖音SDK的实现方法
Apr 28 PHP
如何在PHP中读写文件
Sep 07 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
我的论坛源代码(二)
2006/10/09 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
JS作为值的函数用法示例
2016/06/20 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Numpy掩码式数组详解
2018/04/17 Python
python实现抽奖小程序
2020/04/15 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
深入学习python多线程与GIL
2019/08/26 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
你对IPv6了解程度
2016/02/09 面试题
初中生毕业评语
2014/12/29 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书