add: project category upload logo
This commit is contained in:
parent
274e5090ce
commit
43dc966cf9
|
|
@ -99,3 +99,38 @@ $(document).on("turbolinks:before-cache", function () {
|
|||
|
||||
$(function () {
|
||||
});
|
||||
|
||||
$(document).on('turbolinks:load', function() {
|
||||
|
||||
$('.logo-item-left').on("change", 'input[type="file"]', function () {
|
||||
var $fileInput = $(this);
|
||||
var file = this.files[0];
|
||||
var imageType = /image.*/;
|
||||
if (file && file.type.match(imageType)) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
var $box = $fileInput.parent();
|
||||
$box.find('img').attr('src', reader.result).css('display', 'block');
|
||||
$box.addClass('has-img');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
}
|
||||
});
|
||||
|
||||
$('.attachment-item-left').on("change", 'input[type="file"]', function () {
|
||||
var $fileInput = $(this);
|
||||
var file = this.files[0];
|
||||
var imageType = /image.*/;
|
||||
if (file && file.type.match(imageType)) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
var $box = $fileInput.parent();
|
||||
$box.find('img').attr('src', reader.result).css('display', 'block');
|
||||
$box.addClass('has-img');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
}
|
||||
});
|
||||
})
|
||||
|
|
@ -58,3 +58,149 @@ input.form-control {
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.logo-item {
|
||||
display: flex;
|
||||
|
||||
&-img {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
&-upload {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #e9ecef;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 39px;
|
||||
width: 2px;
|
||||
height: 26px;
|
||||
background: #495057;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 27px;
|
||||
width: 26px;
|
||||
height: 2px;
|
||||
background: #495057;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
&.has-img {
|
||||
.logo-item-upload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.logo-item-upload {
|
||||
display: block;
|
||||
background: rgba(145, 145, 145, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #777777;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: #23272B;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
|
||||
&-img {
|
||||
display: block;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
&-upload {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background: #e9ecef;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 78px;
|
||||
width: 2px;
|
||||
height: 52px;
|
||||
background: #495057;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 78px;
|
||||
left: 54px;
|
||||
width: 52px;
|
||||
height: 2px;
|
||||
background: #495057;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
|
||||
&.has-img {
|
||||
.attachment-item-upload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.attachment-item-upload {
|
||||
display: block;
|
||||
background: rgba(145, 145, 145, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #777777;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: #23272B;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ class Admins::ProjectCategoriesController < Admins::BaseController
|
|||
end
|
||||
|
||||
def update
|
||||
if @project_category.update_attributes({name: @name, pinned_index: params[:project_category][:pinned_index].to_i})
|
||||
if @project_category.update_attributes({name: @name, pinned_index: params[:project_category][:pinned_index].to_i}) && save_image_file(params[:logo], 'logo')
|
||||
redirect_to admins_project_categories_path
|
||||
flash[:success] = '更新成功'
|
||||
else
|
||||
|
|
@ -80,4 +80,12 @@ class Admins::ProjectCategoriesController < Admins::BaseController
|
|||
flash[:danger] = '分类已存在'
|
||||
end
|
||||
end
|
||||
|
||||
def save_image_file(file, type)
|
||||
return unless file.present? && file.is_a?(ActionDispatch::Http::UploadedFile)
|
||||
|
||||
file_path = Util::FileManage.source_disk_filename(@project_category, type)
|
||||
File.delete(file_path) if File.exist?(file_path) # 删除之前的文件
|
||||
Util.write_file(file, file_path)
|
||||
end
|
||||
end
|
||||
|
|
@ -21,6 +21,14 @@ class ProjectCategory < ApplicationRecord
|
|||
has_ancestry
|
||||
|
||||
def logo_url
|
||||
""
|
||||
image_url('logo')
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def image_url(type)
|
||||
return nil unless Util::FileManage.exists?(self, type)
|
||||
Util::FileManage.source_disk_file_url(self, type)
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<%= form_for @project_category, url: {controller: "project_categories", action: "#{type}"} do |p| %>
|
||||
<%= form_for @project_category, url: {controller: "project_categories", action: "#{type}"}, html: { enctype: 'multipart/form-data' } do |p| %>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
|
|
@ -17,9 +17,22 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
精选级别
|
||||
精选等级
|
||||
</label>
|
||||
<%= p.number_field :pinned_index,class: "form-control input-lg",placeholder: "精选级别",required: true%>
|
||||
<%= p.number_field :pinned_index,class: "form-control input-lg",placeholder: "精选等级",required: true%>
|
||||
</div>
|
||||
<div class="logo-item">
|
||||
<% logo_img = @project_category.logo_url %>
|
||||
<div class="logo-item-left mr-3 <%= logo_img ? 'has-img' : '' %>">
|
||||
<img class="logo-item-img nav-logo-img" src="<%= logo_img %>" style="<%= logo_img.present? ? '' : 'display: none' %>"/>
|
||||
<%= file_field_tag(:logo, accept: 'image/png,image/jpg,image/jpeg',style: "display: none", value: params[:logo]) %>
|
||||
<label for="logo" class="logo-item-upload" data-toggle="tooltip" data-title="选择图片"></label>
|
||||
</div>
|
||||
<div class="logo-item-right">
|
||||
<div class="logo-item-title flex-1">网站导航logo</div>
|
||||
<div>格式：PNG、JPG</div>
|
||||
<div>尺寸：高度38px以内，宽等比例缩放</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
|
|
|||
|
|
@ -1,2 +1,19 @@
|
|||
$("#project-category-modals").html("<%= j render(partial: 'admins/project_categories/form_modal', locals: {type: 'update'}) %>")
|
||||
$(".project-category-change-modal").modal('show');
|
||||
$(".project-category-change-modal").modal('show');
|
||||
|
||||
|
||||
$('.logo-item-left').on("change", 'input[type="file"]', function () {
|
||||
var $fileInput = $(this);
|
||||
var file = this.files[0];
|
||||
var imageType = /image.*/;
|
||||
if (file && file.type.match(imageType)) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
var $box = $fileInput.parent();
|
||||
$box.find('img').attr('src', reader.result).css('display', 'block');
|
||||
$box.addClass('has-img');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<label>
|
||||
推荐等级
|
||||
</label>
|
||||
<%= p.number_field :recommend_index,class: "form-control input-lg"%>
|
||||
<%= p.number_field :recommend_index,class: "form-control input-lg",required: true%>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
|
|
|||
Loading…
Reference in New Issue