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