Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输

这篇文章主要介绍“Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输”文章能帮助大家解决问题。

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"  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}"  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异步图片传输”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。