快捷導(dǎo)航

Thinkphp結(jié)合ajaxFileUpload實現(xiàn)ajax異步圖片傳輸全套代碼

更新時間：2023年03月11日 09:55:43 投稿：yin

這篇文章主要介紹了Thinkphp結(jié)合ajaxFileUpload實現(xiàn)ajax異步圖片傳輸全套代碼的相關(guān)資料,需要的朋友可以參考下

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" style="display: none;" 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}" style="height: 30px;" alt=""></div>
</div>

3、JS代碼

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

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

	            if('gif|jpg|png|bmp'.indexOf(ext)>=0){
	                $.ajaxFileUpload({
	                  url: '/admin/slide/upload_image',
	                  secureurl: false,
	                  fileElementId: 'file_thumb', //file標(biāo)簽ID
	                  dataType: 'json', //返回數(shù)據(jù)類型
	                  data:{name:'thumb'},
	                  success:function (data,status){
	                      $("#info_thumb").val(data);
	                      $("#show_thumb").attr('src','/uploads/images/'+data);
	                      $("#info_thumb").focus();
	                  },
	                  complete:function (XMLHttpRequest){

	                  },
	                  error:function (data,status,e){
	                      layer.alert('上傳失敗!');
	                  },
	              });
	            } else {
	                //清空file
	                $("#file_thumb").val("");
	                layer.alert('請上傳合適的圖片類型!');
	            }

	        });
	    });
    </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、前臺調(diào)用

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

到此這篇關(guān)于Thinkphp結(jié)合ajaxFileUpload實現(xiàn)ajax異步圖片傳輸全套代碼的文章就介紹到這了,更多相關(guān)Thinkphp加ajaxFileUpload實現(xiàn)圖片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: