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

 更新时间:2023年03月11日 09:55:43   投稿:yin  
这篇文章主要介绍了Thinkphp结合ajaxFileUpload实现ajax异步图片传输全套代码的相关资料,需要的朋友可以参考下

这篇文章主要给大家介绍了利用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异步图片传输全套代码的文章就介绍到这了,更多相关Thinkphp加ajaxFileUpload实现图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • php app支付宝回调(异步通知)详解

    php app支付宝回调(异步通知)详解

    这篇文章主要为大家详细介绍了php app支付宝回调的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 详解PHP如何完成验证码功能示例

    详解PHP如何完成验证码功能示例

    这篇文章主要介绍了PHP如何完成验证码功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • laravel实现上传图片并在页面显示的例子

    laravel实现上传图片并在页面显示的例子

    今天小编就为大家分享一篇laravel实现上传图片并在页面显示的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 19个超实用的PHP代码片段

    19个超实用的PHP代码片段

    每位程序员和开发者都喜欢讨论他们最爱的代码片段,尤其是当PHP开发者花费数个小时为网页编码或创建应用时,他们更知道这些代码的重要性。为了节约编码时间,小编收集了一些较为实用的代码片段,帮助开发者提高工作效率
    2014-03-03
  • 如何使用php生成zip压缩包

    如何使用php生成zip压缩包

    这篇文章主要介绍了如何使用php生成zip压缩包,对压缩感兴趣的同学,可以实验一下
    2021-04-04
  • PHP用身份证号获取星座和生肖的方法

    PHP用身份证号获取星座和生肖的方法

    PHP用身份证号获取星座和生肖,实用的PHP函数
    2013-11-11
  • Smarty实现页面静态化(生成HTML)的方法

    Smarty实现页面静态化(生成HTML)的方法

    这篇文章主要介绍了Smarty实现页面静态化(生成HTML)的方法,结合实例形式详细分析了Smarty生成静态HTML页面的步骤与相关注意事项,需要的朋友可以参考下
    2016-05-05
  • thinkPHP5(TP5)实现改写跳转提示页面的方法

    thinkPHP5(TP5)实现改写跳转提示页面的方法

    这篇文章主要介绍了thinkPHP5(TP5)实现改写跳转提示页面的方法,结合实例形式分析了thinkPHP5跳转提示页面的修改步骤与相关操作注意事项,需要的朋友可以参考下
    2017-10-10
  • YII框架关联查询操作示例

    YII框架关联查询操作示例

    这篇文章主要介绍了YII框架关联查询操作,结合实例形式分析了Yii框架关联查询的实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-04-04
  • Laravel中日期时间处理包Carbon的简单使用

    Laravel中日期时间处理包Carbon的简单使用

    处理日期和时间需要考虑很多事情,例如日期的格式、时区、闰年和天数各异的月份,自己处理太容易出错了,下面这篇文章主要给大家介绍了关于在Laravel中日期时间处理包Carbon的简单使用,需要的朋友可以参考下。
    2017-09-09

最新评论