1. Referenzdateien

Stellen Sie zun?chst die Plug-Ins jQuery und ajaxFileUpload vor. Achten Sie selbstverst?ndlich auf die Reihenfolge.

<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標(biāo)簽ID
	                  dataType: &#39;json&#39;, //返回?cái)?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, Hintergrundverarbeitung (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());
        }
    }

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

Das obige ist der detaillierte Inhalt vonWie l?sst sich Thinkphp mit ajaxFileUpload kombinieren, um eine asynchrone Bildübertragung mit Ajax zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!