1. Reference files

First introduce the jQuery and ajaxFileUpload plug-ins. Pay attention to the order. Needless to say, this is true for all plug-ins.

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

2. HTML code

<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 code

    <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;, //返回數(shù)據(jù)類型
	                  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. Background processing (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. Foreground call

<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>

The above is the detailed content of How does Thinkphp combine with ajaxFileUpload to implement asynchronous image transmission with ajax?. For more information, please follow other related articles on the PHP Chinese website!