Thinkphp结合ajaxFileUpload实现ajax异步图片传输全套代码

时间:2023-06-14 04:01:53 

这篇文章主要给大家介绍了利用Thinkphp结合ajaxFileUpload实现异步图片传输的方法,文中给出了详细的示例代码,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

使用Jquery的ajaxFileUpload的图片上传插件,感觉这种异步上传的方式非常好用接下来就介绍一下这个插件的使用。

通过查看插件的源码发现,插件的实现原理大概就是创建一个隐藏的表单和iframe然后用JS去提交,获得返回值。

1、引用文件

先引入jQuery与ajaxFileUpload插件。注意先后顺序,这个不用说了,所有的插件都是这样。

<script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script>
<script src="__ADMIN__/js/ajaxfileupload.js"></script>

2、HTML代码

<div class="form-group">
   <label class="col-sm-2 control-label">缩略图</label>
   <div class="col-sm-8">            
       <div id="file-pretty">
           <div>
               <input type="file" id="file_thumb" name="thumb" class="form-control" style="display: none;" value="">
               <div class="input-append input-group">
                   <span class="input-group-btn">
                       <button id="btn_thumb" class="btn btn-white" type="button">选择图片</button>
                   </span>
                   <input id="info_thumb" name="thumb" class="input-large form-control" type="text" value="{$info.img}">
               </div>
           </div>
       </div>                    
   </div>
   <div class="col-sm-2"><img id="show_thumb" src="/uploads/image/{$info.thumb}" style="height: 30px;" alt=""></div>
</div>

3、JS代码

<script type="text/javascript">
   $(function(){
       $("#btn_thumb").click(function(){
           $("#file_thumb").click();
       });

       //异步上传
       $("body").delegate('#file_thumb', 'change', function(){
           var filepath = $("input[name='thumb']").val();
           var arr = filepath.split('.');
           var ext = arr[arr.length-1];
           //alert(filepath);exit();

           if('gif|jpg|png|bmp'.indexOf(ext)>=0){
               $.ajaxFileUpload({
                 url: '/admin/slide/upload_image',
                 secureurl: false,
                 fileElementId: 'file_thumb', //file标签ID
                 dataType: 'json', //返回数据类型
                 data:{name:'thumb'},
                 success:function (data,status){
                     $("#info_thumb").val(data);
                     $("#show_thumb").attr('src','/uploads/images/'+data);
                     $("#info_thumb").focus();
                 },
                 complete:function (XMLHttpRequest){

                 },
                 error:function (data,status,e){
                     layer.alert('上传失败!');
                 },
             });
           } else {
               //清空file
               $("#file_thumb").val("");
               layer.alert('请上传合适的图片类型!');
           }

       });
   });
   </script>

4、后台处理(PHP)

//单文件(包含单文件)异步上传
   public function upload_image(){
       //图片上传
       $file = request()->file(input('name'));
       $info = $file->move(ROOT_PATH . 'public/uploads/images');
       if($info) {
           return json_encode($info->getSaveName());
       }
   }

5、前台调用

<div id="slideshow">
 <ul class="rslides" id="slider">
   {volist name="data" id="vo"}
   <li><a href="{$vo.url}" rel="external nofollow"  rel="bookmark" target="_blank"> <img src="__UPLOADS__/images/{$vo.img}" max-width="" max-height="" alt="{$vo.title}"></a>
     <p class="slider-caption">{$vo.title}</p>
   </li>
   {/volist}
 </ul>
</div>
标签:Thinkphp,ajaxFileUpload,ajax,图片上传
0
投稿

猜你喜欢

  • JavaScript中常用的简洁高级技巧总结

    2024-04-19 10:47:30
  • python使用for循环和海龟绘图实现漂亮螺旋线

    2023-08-01 10:38:57
  • Golang中的int类型和uint类型到底有多大?

    2024-04-25 15:04:44
  • go和python调用其它程序并得到程序输出

    2021-06-05 21:43:02
  • PHP addslashes()函数讲解

    2023-06-04 04:28:24
  • asp 实现检测字符串是否为纯字母和数字组合的函数

    2009-10-04 20:39:00
  • ASP 改良版MD5、SHA256多重加密类(二次及多次)

    2012-11-30 20:26:47
  • Python OpenCV基于霍夫圈变换算法检测图像中的圆形

    2023-11-12 05:33:36
  • asp下用OracleInProcServer完成对Oracle的连接和操作

    2008-04-13 07:10:00
  • 深入解析MySQL索引的原理与优化策略

    2024-01-19 02:29:02
  • Python数据可视化之matplotlib.pyplot绘图的基本参数详解

    2022-06-10 12:19:48
  • Python实现多任务进程示例

    2023-03-04 21:42:09
  • Python判断一个文件夹内哪些文件是图片的实例

    2023-08-18 01:22:44
  • windows10下mysql 8.0 下载与安装配置图文教程

    2024-01-17 19:45:51
  • python 将大文件切分为多个小文件的实例

    2021-05-23 23:32:02
  • Python反爬机制-验证码功能的具体实现过程

    2023-02-05 18:53:19
  • python数字图像处理之基本形态学滤波

    2021-03-18 22:49:36
  • Python进阶-函数默认参数(详解)

    2023-11-16 17:14:44
  • 解决nohup执行python程序log文件写入不及时的问题

    2021-06-16 14:04:30
  • 阿里云 CentOS7.4 安装 Python3.6的方法讲解

    2022-06-12 23:56:13
  • asp之家 网络编程 m.aspxhome.com