媒体信息布局展现、添加和后台处理

一、需求
二、工具
 (一)WebUploader
(二) bootstrap FileInput

三、功能点    1.后端传入模型层当前已有的图片和视频信息。                                                                                                                         2.前端通过td的colspan填充信息数量变量，然后通过[#list]方法遍历信息填充出已有信息div  四、示例

(一) 用户点击轮播链接，url映射的处理器方法

@RequestMapping(value = "/edit", method = RequestMethod.GET)
public String edit(Long id, ModelMap model) {
model.addAttribute("articleCategoryTree", navigationService.findTree(distinguishType,false));
model.addAttribute("tags", tagService.findList(Tag.Type.article));
model.addAttribute("article", articleService.find(id));
model.addAttribute("articleImages", articleImageService.findList(id));//存储的图片
model.addAttribute("articleVideos", articleVideoService.findList(id));//存储的视频
model.addAttribute("regions", regionService.findAll());
//legend update1
return "/admin/web/article/new/edit";
}

(二) 界面edit.ftl[align=left]    1.图片展现                                                                                     [/align]<tr>
    <th><p><span>轮播图片</span></p></th>
//将根据后台返回的图片数量决定当前图片列表
    <td colspan="${articleImages?size}" class="img_box">
        [#list articleImages as articleImage]
        <div id="u3234" style="padding:10px;float:left;" class="img_parents">
            <img style="width:80px;height:80px;" id="u3234_img" class="img" src="${articleImage.imagePath}"/>
            <div id="u3242" class="ax_default label" style="height:28px;">
                <p style="float:left; margin:0 10px;"><span>编辑</span></p>
                <p style="float:left;"<span class="delete_img">删除</span></p>
            </div>
        </div>
        [/#list]
        <div style="float:left;margin:10px;position:relative;">
            <span class="fieldSet add_img" style="width:78px;height:78px;border:1px solid #cecece;color:blue;line-height:78px;font-size:16px;text-align:center;display:block;">添加图片</span>
        </div>
    </td>
</tr>
<input type="file" style="position:absolute;left:0px;top:0px;width:80px;height:80px;opacity:0;">
    2.添加图片弹出层

<div class="dialog_img" style="border:1px solid #666;display:none;width:320px;height:130px;position:fixed;left:50%;top:50%;margin-left:-260px;margin-top:-200px;background:#fff;padding:20px;z-index:999;">
    <div style="height:70px;margin-top:20px;">
        <p style="float:left;line-height:32px;width:60px;text-align:right;padding-right:10px;">选择图片</p>
        <div style="float:left;height:70px;" class="img_parent">
            <input id="imgputId" type="text" style="width:130px;height:20px;display:block;float:left;margin:0 10px;" name="imagePath" value="" class="text img_input" disabled="readOnly" maxlength="200" title="${message("admin.goods.imageTitle")}"/>
            <a href="javascript:;" class="button filePicker">上传图片</a>
        </div>
    </div>
    <div style="height:26px;margin-top:10px;">
        <div class="btn_success_img" style="float:left;height:26px;width:60px;text-align:center;line-height:26px;background:#cc020b;color:#fff;margin-left:86px;margin-right:20px;">提交</div>
        <div class="btn_error_img" style="float:left;height:24px;width:58px;border:1px solid #c8c8c8;text-align:center;line-height:24px;background:#fff;color:#bbb;margin-right:30px;">取消	</div>
    </div>
</div>

    3.图片添加处理     1）增加：前端展现出增加会话框，提交增加媒体列，并将媒体提交后台

<script>
    $(".add_img").click(function(){
$(".dialog_img").css("display","block");
$('#imgputId').val('');
    })
    $(".btn_error_img").click(function(){
$(".dialog_img").css("display","none");
    })
    $(".btn_success_img").click(function(){
var a = $(this).parents(".dialog_img").find(".img_input").attr("value");
var pid = $(this).parents(".dialog_img").find(".img_input").attr("objectId");
console.log("ddd:" + pid);
if(a == null){
return;
}else{
//var inputPath = a.replace(/\\/g,"/");
//var inputPath = a.replace(/\\/g,"/").replace(/e:\/upload\/ssl/,"/file");
console.log(inputPath);
console.log("url1:" + "'${setting.backstageUrl}'");
var inputPath = a;
var html = "";
html = '<div id="u3239" style="padding:10px;float:left;" class="img_parents">'
+'<img style="width:80px;height:80px;" class="img " '
+ 'id="'
+ pid
+'" src="'
+ inputPath
+'"/>'
+'<div id="u3242" class="ax_default label" style="height:28px;">'
+'<p style="float:left;margin:0 10px;"><span>编辑</span></p><p style="float:left;"><span class="delete_img">删除</span></p>'
+'</div>'
+'</div>';
    $(".img_box").prepend(html);
    $.ajax({
url: '${setting.backstageUrl}/admin//webArticle/saveImage.jhtml',
type: "POST",
data: { image_path: inputPath,article_id:${article.id},title:pid},
dataType: "json",
async: true,
cache: false,
success: function(data) {
if (data.message.type == "success") {
$(".dialog_img").css("display","none");
}else{
$(".dialog_img").css("display","none");
}
}
});
}
    })
</script>

2）删除 ，删除展现的媒体列，后台删除媒体数据

<script>
    $(".img_box").on("click",".delete_img",function(){
var $this = this;
var path = $($this).parents('.img_parents').find('img').attr("src");
var pid = $($this).parents('.img_parents').find('img').attr("id");
//var path = $($this).parents('.img_parents').find('img').attr("src").replace(/\/file/,"e:\\upload\\ssl")
console.log(path);
//$($this).parents(".img_parents").remove();
$.ajax({
url: '${setting.backstageUrl}/admin/webArticle/deleteImage.jhtml',
type: "POST",
data: {title:pid},
dataType: "json",
async: true,
cache: false,
success: function(data) {
if (data.message.type == "success") {
if($($this).parents(".img_parents") != null)
$($this).parents(".img_parents").remove();
}else{
if($($this).parents(".img_parents") != null)
$($this).parents(".img_parents").remove();
}
}
});
})

</script>

3)文件上传（采用插件webuploader）  

<script type="text/javascript"         src="${setting.backstageUrl}/resources/admin/js/webuploader.js"></script><script type="text/javascript"     src="${setting.backstageUrl}/resources/admin/js/common.js"></script><script type="text/javascript">    $().ready(function() {         var $filePicker = $("a.filePicker");         $filePicker.uploader();         $("a.videoImagePicker").uploader({fileTypes:"image"});         $("a.videoPicker").uploader({fileTypes:"media"});    }</script> 

    在common.js创建Web Uploader实例

var webUploader = WebUploader.create({
swf: '${setting.backstageUrl}/resources/admin/flash/webuploader.swf',
server: settings.url + (settings.url.indexOf('?') < 0 ? '?' : '&') + 'fileType=' + settings.fileType + '&ftype='+opts.type +'&adId='+opts.adId+'&commercialTenant='+opts.commercialTenant+'&token=' + getCookie("token"),
pick: {
id: element,
multiple: false
},
fileVal: settings.fileName,
formData: settings.data,
fileSingleSizeLimit: settings.maxSize * 1024 * 1024 * 1024,
accept: {
extensions: settings.extensions
},
fileNumLimit: 1,
auto: true
        })

接着监听fileQueued事件，即当有文件添加进来的时候，展示进度条进度

webUploader.on('beforeFileQueued', function(file) {if ($.isFunction(settings.before) && settings.before.call(element, file) === false) {return false;}if ($.trim(settings.extensions) == '') {this.trigger('error', 'Q_TYPE_DENIED');return false;}this.reset();$progressBar.show();})
文件上传状态提示

webUploader.on('uploadProgress', function(file, percentage) {
$progressBar.width(percentage * 100 + '%');
    })

文件上传成功或者失败事件    

webUploader.on('uploadAccept', function(file, data) {$progressBar.fadeOut("slow", function() {$progressBar.width(0);});if (data.message.type != 'success') {$.message(data.message);return false;}$.message("success", "上传成功");$element.prev("input:text").val(data.url);//将input的text值填充上传文件地址var pid = data.url.replace(/.*\/([^\/]*)\.(.*)/g,"$1").replace(/-/g,"1");//上传文件识别码        $element.prev("input:text").attr("objectId",pid);$element.siblings("div").find("img").attr("src",data.url);//预览图片var length=$element.closest(".fuj").children('span').length;var a=length==0?"fujian":"fujian2";$element.closest(".fuj").append(    '<span class="'+a+'">附件'+(length+1)+'<span class="icon_fj"></span> '+'<input type="hidden" name="files" value="'+data.url+'" />'+    '</span>');$(".icon_fj").click(function(){$(this).parent("span").remove();                });if ($.isFunction(settings.complete)) {settings.complete.call(element, file, data);}}).on('error', function(type) {switch(type) {    case "F_EXCEED_SIZE":        $.message("warn", "${message("admin.upload.sizeInvalid")}");        break; case "Q_TYPE_DENIED":     $.message("warn", "${message("admin.upload.typeInvalid")}");break; default:$.message("warn", "${message("admin.upload.error")}");}});(四) 持久化 

五、总结