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读注册表
Oct 09 PHP
搜索引擎技术核心揭密
Oct 09 PHP
php 301转向实现代码
Sep 18 PHP
通过PHP CLI实现简单的数据库实时监控调度
Jul 01 PHP
Ping服务的php实现方法,让网站快速被收录
Feb 04 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
Nov 26 PHP
Drupal简体中文语言包安装教程
Sep 27 PHP
Symfony页面的基本创建实例详解
Jan 26 PHP
php截取中文字符串函数实例
Feb 23 PHP
实例简介PHP的一些高级面向对象编程的特性
Nov 27 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
Jan 16 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
Apr 04 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中用foreach来操作数组的代码
2011/07/17 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php给数组赋值的实例方法
2019/09/26 PHP
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
轮播图组件js代码
2016/08/08 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
Vue实现导航栏菜单
2020/08/19 Javascript
Python中文编码那些事
2014/06/25 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
QML使用Python的函数过程解析
2019/09/26 Python
python读取ini配置文件过程示范
2019/12/23 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
项目建议书怎么写
2014/05/15 职场文书
应聘教师求职信
2014/07/19 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
初中同学会致辞
2015/08/01 职场文书
党员公开承诺书2016
2016/03/24 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
关于Vue中的options选项
2022/03/22 Vue.js
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL