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(&#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('name'));
        $info = $file->move(ROOT_PATH . 'public/uploads/images');
        if($info) {
            return json_encode($info->getSaveName());
        }
    }

5.

위 내용은 Thinkphp는 ajaxFileUpload와 어떻게 결합하여 ajax로 비동기 이미지 전송을 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!