插件窝 干货文章 Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输

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

class amp gt div 717    来源:    2024-10-24

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">@@##@@</div>
</div>

3、JS代码

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

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

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

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

            });
        });
    </script>

4、后台处理(PHP)

    //单文件(包含单文件)异步上传
    public function upload_image(){
        //图片上传
        $file = request()->file(input(&#39;name&#39;));
        $info = $file->move(ROOT_PATH . &#39;public/uploads/images&#39;);
        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"> @@##@@</a>
      <p class="slider-caption">{$vo.title}</p>
    </li>
    {/volist}
  </ul>
</div>

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