1、引用文件
先引入jquery與ajaxfileupload插件。注意先后順序,這個不用說了,所有的插件都是這樣。
<script></script><script></script>
2、html代碼
<div> ????<label>縮略圖</label> ????<div>????????????? ????????<div> ????????????<div> ????????????????<input> ????????????????<div> ????????????????????<span> ????????????????????????<button>選擇圖片</button> ????????????????????</span> ????????????????????<input> ????????????????</div> ????????????</div> ????????</div>????????????????????? ????</div> ????<div>@@##@@</div> </div>
3、JS代碼
????<script> $(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標簽ID dataType: 'json', //返回數據類型 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、前臺調用
<div> ??<ul> ????{volist?name="data"?id="vo"} ????<li> <a>?@@##@@</a> ??????<p>{$vo.title}</p> ????</li> ????{/volist} ??</ul> </div>
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END