uploadify flash版本下载地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zipjavascript
将解压后的文件放入项目公共文件中,我放在项目中的地址是:cms\public\static\admin\plus\uploadify,cms是个人项目文件夹css
首先引入并设置相关参数html
<!--uploadify--> <link href="{$Think.config.__STATIC__}/admin/plus/uploadify/uploadify.css" rel="stylesheet"> <script type="text/javascript" src="{$Think.config.__STATIC__}/admin/plus/uploadify/jquery.uploadify.min.js"></script> <script type="text/javascript"> $(function() {
//uploadify为要放入的节点id $('#uploadify').uploadify({ //指定swf地址 'swf' : '{$Think.config.__STATIC__}/admin/plus/uploadify/uploadify.swf', //上传后端处理方法 'uploader' : "{:url('cate/uploadify')}", 'progressData':'speed', //按钮文字 'buttonText':'上传图片', //按钮样式 'buttonClass':'btn btn-azure', //上传文件类型 'fileTypeDesc':'Image Files', //设置发送数据文本框的name值 'fileObjName':'cate_img', //上传成功后回调函数 'onUploadSuccess':function(file,data,response){ var html="<img src='http://127.0.0.1/cms/public" + data + "' width='80px' height='80px'/>" $("#cate_img").html(html); $("#hidden_img").val(data); } // Your options here }); $("#uploadify-button").removeAttr('style'); $("#uploadify-button").attr("class","btn btn-azure"); }); </script>
<div class="form-group"> <label class="col-sm-2 control-label no-padding-right">栏目图片</label> <div class="col-sm-3">
<!-- 须要使用的地方id设置成uploadify,与上面的要对应 --> <span id="uploadify"></span> <input id="hidden_img" value="" name="cate_img" type="hidden"> </div> <div class="col-sm-3" id="cate_img"> </div> <p class="help-block col-sm-4 red">* 必填</p> </div>
后端处理方法
public function uploadify(){ $file = request()->file('cate_img'); //halt($file); $info = $file->move( './uploads/cate'); if($info){ $value='/uploads/cate/'.$info->getSaveName(); echo $value; } else{ echo $file->getError(); } }