Thinkphp結(jié)合ajaxFileUpload實(shí)現(xiàn)ajax異步圖片傳輸全套代碼
這篇文章主要給大家介紹了利用Thinkphp結(jié)合ajaxFileUpload實(shí)現(xiàn)異步圖片傳輸?shù)姆椒?,文中給出了詳細(xì)的示例代碼,對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。
使用Jquery的ajaxFileUpload的圖片上傳插件,感覺這種異步上傳的方式非常好用接下來就介紹一下這個(gè)插件的使用。
通過查看插件的源碼發(fā)現(xiàn),插件的實(shí)現(xiàn)原理大概就是創(chuàng)建一個(gè)隱藏的表單和iframe然后用JS去提交,獲得返回值。
1、引用文件
先引入jQuery與ajaxFileUpload插件。注意先后順序,這個(gè)不用說了,所有的插件都是這樣。
<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', //返回?cái)?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、后臺(tái)處理(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、前臺(tái)調(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實(shí)現(xiàn)ajax異步圖片傳輸全套代碼的文章就介紹到這了,更多相關(guān)Thinkphp加ajaxFileUpload實(shí)現(xiàn)圖片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
codeigniter教程之上傳視頻并使用ffmpeg轉(zhuǎn)flv示例
這篇文章主要介紹了codeigniter上傳視頻并使用ffmpeg轉(zhuǎn)成flv的示例,需要的朋友可以參考下2014-02-02老生常談ThinkPHP中的行為擴(kuò)展和插件(推薦)
下面小編就為大家?guī)硪黄仙U凾hinkPHP中的行為擴(kuò)展和插件(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05PHP+Mysql+jQuery中國地圖區(qū)域數(shù)據(jù)統(tǒng)計(jì)實(shí)例講解
使用過百度統(tǒng)計(jì)或者cnzz統(tǒng)計(jì)的童鞋應(yīng)該知道,后臺(tái)有一個(gè)地圖統(tǒng)計(jì),不同訪問量的省份顯示的顏色也不一樣,今天我將帶領(lǐng)大家開發(fā)一個(gè)這樣的案例。2015-10-10Yii安裝EClientScript插件擴(kuò)展實(shí)現(xiàn)css,js文件代碼壓縮合并加載功能
這篇文章主要介紹了Yii安裝EClientScript插件擴(kuò)展實(shí)現(xiàn)css,js文件代碼壓縮合并加載功能,分析了EClientScript插件的下載、安裝、設(shè)置及使用的相關(guān)技巧,需要的朋友可以參考下2016-07-07php實(shí)現(xiàn)購物車產(chǎn)品刪除功能(2)
這篇文章主要為大家詳細(xì)介紹了php實(shí)現(xiàn)購物車產(chǎn)品刪除功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03如何優(yōu)雅的使用 laravel 的 validator驗(yàn)證方法
web 開發(fā)過程中經(jīng)常會(huì)需要進(jìn)行參數(shù)驗(yàn)證,這篇文章主要介紹了如何優(yōu)雅的使用 laravel 的 validator驗(yàn)證方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-11-11