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调用Oracle存储过程
Oct 09 PHP
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
Mar 06 PHP
php 文件上传代码(限制jpg文件)
Jan 05 PHP
用PHP实现读取和编写XML DOM代码
Apr 07 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
Oct 09 PHP
php 深入理解strtotime函数的使用详解
May 23 PHP
使用PHP编写的SVN类
Jul 18 PHP
php实现refresh刷新页面批量导入数据的方法
Dec 23 PHP
thinkPHP5.0框架API优化后的友好性分析
Mar 17 PHP
ThinkPHP中图片按比例切割的代码实例
Mar 08 PHP
Smarty缓存机制实例详解【三种缓存方式】
Jul 20 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
Apr 06 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设计聊天室步步通
2006/10/09 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
Vue项目中设置背景图片方法
2018/02/21 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python机器学习之神经网络(一)
2017/12/20 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python如何读取、写入CSV数据
2020/07/28 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
市场部规章制度
2014/01/24 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
公司内部升职自荐信
2015/03/27 职场文书
开工典礼致辞
2015/07/29 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Python 视频画质增强
2022/04/28 Python