uploadify結合ThinkPHP5上傳類實現非同步上傳圖片
阿新 • • 發佈:2019-01-11
注:我們使用的是免費的Flash版本
①引入必需的檔案
- jQuery
- jquery.uploadify-3.1.min.js
- uploadify.css
②HTML元素的搭建(結合bootstrap)
<div class="form-group"> <label class="col-sm-2 control-label">圖片:</label> <div class="col-sm-10"> <input id="file_upload" type="file" multiple="true" > <img style="display:none" id="upload_org_code_img" src="" width="150" height="150"> <input id="file_upload_image" name="url" type="hidden" multiple="true" value=""> </div> </div>
兩個input和一個img標籤構成了uploadify的核心使用方法
- id為file_upload的input框為上傳圖片的按鈕
- img用於顯示上傳成功之後的圖片
- id為file_upload_image的input框是隱藏的,負責提交圖片的地址至伺服器
③image.js檔案的編寫
$(function() { $("#file_upload").uploadify({ 'swf' : URL.swf_url, 'uploader' : URL.image_url, 'buttonText' : '圖片上傳', 'fileTypeDesc' : '圖片', 'fileObjName' : 'photo', 'fileTypeExts' : '*.gif; *.jpg; *.png', 'onUploadSuccess' : function(file, data, response) { if(response){ var obj = JSON.parse(data); $("#upload_org_code_img").attr("src", obj.data); $("#upload_org_code_img").show(); $("#file_upload_image").attr("value", obj.data); } } }); });
常用屬性詳解
- swf:對應uploadify.swf的路徑
- uploader:上傳檔案的API
- buttonText:按鈕顯示的文字
- fileTypeDesc:可選檔案的描述
- fileObjName:設定在後臺使用的檔名
- fileTypeExts:設定允許上傳的副檔名
方法
onUploadSuccess:上傳成功後觸發的方法
有三個引數:file,data,response
- file:返回上傳檔案的物件
- data:上傳檔案的API的返回值
- response:上傳成功則返回true
④API的編寫
public function upload() { $file = Request::instance()->file('photo'); //目錄 $info = $file->move('upload'); if($info && $info->getPathname()){ return show(1, '圖片上傳成功', '\\'.$info->getPathname()); } return show(0,'圖片上傳失敗'); }
1.獲取上傳的圖片
$file = Request::instance()->file('photo');
其中 file()函式中填入fileObjName屬性中設定的值
2.移動到特定的目錄
$info = $file->move('upload');
3.返回JSON格式的資料
關於show方法:
function show($status, $message, $data = array())
{
$result = array(
'status' => $status,
'message' => $message,
'data' => $data
);
return json($result);
}
如果執行完以上操作後 瀏覽器還是使用上傳功能的話考慮以下問題
https://www.jianshu.com/p/940088f4923c