環境
- 前端框架： bootstrap
- 前端上傳組件： file-input.js
- 編輯器：VSCode
- 操作系統：MAC
- 服務器開發語言：golang
- 後端框架：beego
簡介
- 支持多圖上傳
- 支持圖片顯示
流程
1. 前端
1.1 引入js和css
<head> ... <!-- Bootstrap --> <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <!-- fileinput --> <link rel="stylesheet" href="/static/css/fileinput.min.css"> <!-- sns font --> <link rel="stylesheet" href="/static/css/font-awesome.min.css"> </head> <body> ... <script src="/static/js/jquery-1.11.3.min.js"></script> <script src="/static/js/bootstrap.min.js"></script> <script src="/static/js/fileinput.min.js"></script> </body>
1.2 添加窗口
添加點擊按鈕
<button type="button" id="uploadfiles" data-toggle="modal" data-target="#filesModal" class="btn btn-sm btn-primary">批量上傳文件</button>
添加窗口
<div id="filesModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- title -->
<h5 class="modal-title" id="filesModalLabel"></h5>
</div><!-- header -->
<div class="modal-body">
<input id="input-b3" name="input-b3[]" type="file" class="file" multiple data-show-upload="false"
data-show-caption="true" data-msg-placeholder="Select {files} for upload...">
</div>
<div class="modal-footer">
<!-- button -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- footer -->
</div>
</div>
</div>1.3 js代碼
爲按鈕添加點擊事件
$('#uploadfiles').on('click', function () {
$('#filesModalLabel').text("上傳文件");
});初始化file-input組件
$("#input-b3").fileinput({
// language: 'zh', //設置語言
uploadUrl: location.pathname, //上傳的地址
allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件後綴
showUpload: false, //是否顯示上傳按鈕
showCaption: false,//是否顯示標題
browseClass: "btn btn-primary", //按鈕樣式
uploadExtraData: function () {
return {
flag: "upload"
}
},
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
}).on("fileuploaded", function (event, data) {
if (data.response) {
pushMessage('success', '恭喜|操作成功。');
}
});
//關閉窗口後刷新
$(function () {
$('#filesModal').on('hidden.bs.modal', function () {
location.reload();
})
});2. 後端
2.1 添加controller
type PictureController{
beego.Controller
index string
}配置路由
beego.Router("/admin/picture", &background.PictureController{})2.1 添加上傳邏輯
在controller中
type Error struct {
Level string
Msg string
}
type Response struct {
Status int
Data interface{}
Err Error
}
func (m *PictureController) Post() {
resp := &Response{Status: 1}
defer resp.WriteJson(m.Ctx.ResponseWriter)
flag := m.GetString("flag")
switch flag {
case "upload":
m.Upload(resp)
default:
resp.Status = -1
resp.Err = Error{Level: "warning", Msg: "參數錯誤|未知的flag標誌。"}
}
}
const ResTmpPath = "../../tmp"
// IsExist 查看文件或目錄是否存在
func (m *PictureController)IsExist(path string) bool {
_, err := os.Stat(path)
return err == nil || os.IsExist(err)
}
// Upload 上傳文件
func (m *PictureController) Upload(resp *Response) {
var allfiles = m.Ctx.Request.MultipartForm.File
var keys []string
var files []*multipart.FileHeader
for k, vals := range allfiles {
keys = append(keys, k)
files = append(files, vals...)
}
if !m.IsExist(ResTmpPath) {//ResTmpPath: 臨時目錄
err := os.MkdirAll(ResTmpPath, 777)
if err != nil {
resp.Status = -1
resp.Err = Error{Level: "warning", Msg: "臨時目錄創建失敗。"}
return
}
}
for i, h := range files {
f, err := h.Open()
defer f.Close()
if err != nil {
resp.Status = -1
resp.Err = Error{Level: 'warning', Msg: "文件上傳失敗。"}
return
}
path := ResTmpPath + "/" + h.Filename
dst, err := os.Create(path)
defer dst.Close()
if err != nil {
resp.Status = -1
resp.Err = Error{Level: "warning", Msg: "文件上傳失敗。"}
return
}
io.Copy(dst, f)
}
}2.2 配置靜態目錄
必須在beego啓動前
...
beego.SetStaticPath("/images", "../../tmp")
beego.Run()