Bagaimanakah Thinkphp bergabung dengan ajaxFileUpload untuk melaksanakan penghantaran imej tak segerak dengan ajax?

1. Fail rujukan

Perkenalkan pemalam jQuery dan ajaxFileUpload. Beri perhatian kepada pesanan. Tidak perlu dikatakan, ini adalah kes untuk semua pemalam.

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

2. Kod 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. Kod 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

    //单文件（包含单文件）异步上传
    public function upload_image(){
        //图片上传
        $file = request()->file(input('name'));
        $info = $file->move(ROOT_PATH . 'public/uploads/images');
        if($info) {
            return json_encode($info->getSaveName());
        }
    }

Atas ialah kandungan terperinci Bagaimanakah Thinkphp bergabung dengan ajaxFileUpload untuk melaksanakan penghantaran imej tak segerak dengan ajax?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!