标签：function plugin ror ogre display upload 进度 read jquer
遇到的问题总结:
1.//图片排序
$("#pics").sortable();
2.//上传的文件对象名，与后台所传参数名保持一致,最初因为这个名称错误浪费了许久时间
fileObjName : "image",
3.上传数量控制
提示消息需要到uploadify.js中修改, 修改后发现没有效果;
所以只能在保存的时候做一个判断;
//判断图片的数量
if($(".myimg").length >3){
$.DU_show("errorinfo", "red", "礼品图片最多只能设置3张图片,请删减后再保存!");
return ;
}
4.其它需要注意的问题,js的版本,对应的都修改成高版本的
<link href="${basepath}/static/scripts/plugins/uploadify/uploadify.css"
rel="stylesheet">
<link
href="${basepath}/static/css/themes/base/jquery.ui.all.css"
rel="stylesheet">
<script
src="${basepath}/static/scripts/plugins/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script
src="${basepath}/static/scripts/plugins/uploadify/jquery.uploadify.js"></script>
5.相关的代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>礼品定义 - 添加表单</title> 7 <#include "/./common/headJs.html"/> 8 9 <link 10 href="${basepath}/static/scripts/plugins/summernote/summernote.css" 11 rel="stylesheet"> 12 <link 13 href="${basepath}/static/scripts/plugins/summernote/summernote-bs3.css" 14 rel="stylesheet"> 15 <link href="${basepath}/static/scripts/plugins/uploadify/uploadify.css" 16 rel="stylesheet"> 17 <link 18 href="${basepath}/static/css/themes/base/jquery.ui.all.css" 19 rel="stylesheet"> 20 <#include "/./common/footJs.html"/> 21 <script 22 src="${basepath}/static/scripts/plugins/jquery/jquery-ui-1.10.3.custom.min.js"></script> 23 24 <script 25 src="${basepath}/static/scripts/plugins/summernote/summernote.min.js"></script> 26 <script 27 src="${basepath}/static/scripts/plugins/summernote/summernote-zh-CN.js"></script> 28 <script 29 src="${basepath}/static/scripts/plugins/uploadify/jquery.uploadify.js"></script> 30 <style> 31 ul { 32 list-style-type: none; 33 margin: 0; 34 width: 100%; 35 } 36 37 ul li { 38 width: 120px; 39 float: left; 40 } 41 42 ul li { 43 list-style-type: none; 44 } 45 46 a:hover { 47 text-decoration: none; 48 } 49 50 .col-xs-11 { 51 padding: 0px !important; 52 } 53 54 .form-group { 55 margin-bottom: 0px; 56 } 57 58 .form-control[readonly] { 59 cursor: inherit; 60 background-color: #fff; 61 } 62 63 .release-goods-title li:hover { 64 cursor: pointer; 65 } 66 67 .release-menu-one { 68 width: 482px !important; 69 } 70 71 .release-menu-one ul li { 72 cursor: pointer; 73 } 74 75 .release-goods-btn input[disabled] { 76 cursor: not-allowed; 77 background-color: #7BA9D0; 78 opacity: 1; 79 } 80 81 .col-xs-4 { 82 padding: 0px !important; 83 } 84 85 .col-xs-2 { 86 padding: 0px !important; 87 } 88 89 .col-xs-8 { 90 padding: 0px !important; 91 } 92 93 .col-xs-9 { 94 padding: 0px !important; 95 } 96 97 .label-text { 98 padding-top: 8px; 99 } 100 101 .row { 102 margin-top: 20px; 103 } 104 105 .radio-box { 106 line-height: 33px; 107 } 108 109 #pics { 110 margin-top: 10px; 111 padding: 10px; 112 border: 1px solid #ccc; 113 height: 110px; 114 } 115 116 .del { 117 position: absolute; 118 top: 0; 119 right: 0; 120 background-color: white; 121 } 122 123 .preview, .del { 124 cursor: pointer; 125 text-indent: -99999px; 126 float: left; 127 margin-left: 20px 128 } 129 130 #pics li { 131 float: left; 132 display: block; 133 width: 100px; 134 height: 80px; 135 padding: 2px; 136 border: 1px solid #ccc; 137 margin: 10px; 138 } 139 </style> 140 </head> 141 <body> 142 <div class="wrapper"> 143 <!-- Main --> 144 <div class="sys-main"> 145 <!-- Main Nav --> 146 <div class="sys-nav"> 147 <div class="minibtnd"> 148 <a id="sys-navMiniBtn" href="javascript:;"><i 149 class="fa fa-bars"></i></a> 150 </div> 151 <ul class="nav navul" id="side-menu"></ul> 152 </div> 153 <script type="text/javascript"> 154 var currentURL = ‘‘; 155 </script> 156 <!-- ./Main Nav --> 157 158 <!-- Main Block --> 159 <div class="sys-block"> 160 161 <!-- Main Nav 2 --> 162 <div class="sys-nav2"> 163 <div class="posr"> 164 <div class="titd">积分管理</div> 165 <ul id="side-menu2"> 166 167 </ul> 168 <div class="minibtnd2"> 169 <a href="javascript:;"><i class="fa fa-outdent"></i></a> 170 </div> 171 </div> 172 </div> 173 <!-- ./Main Nav 2 --> 174 <h2 class="sys-tit"> 175 <i class="fa fa-diamond fa-fw"></i>积分管理<span>/</span>礼品定义<span>/</span>新增 176 </h2> 177 <!-- Main Parent --> 178 <div class="sys-parent"> 179 <form role="form" name="cardAddForm" id="cardAddForm" method="post" 180 action=""> 181 <div class="promotion_add_box"> 182 <div class="row"> 183 <div class="col-xs-1 text-right label-text">编码：</div> 184 <div class="col-xs-4"> 185 <input type="text" class="form-control" id="giftcode" 186 name="giftcode" maxlength="50" readonly="readonly" 187 value="${code}"> 188 </div> 189 <div class="col-xs-1 text-right label-text">名称：</div> 190 <div class="col-xs-4"> 191 <input type="text" class="form-control" id="giftname" 192 name="giftname" maxlength="64"> 193 </div> 194 </div> 195 <div class="row"> 196 <div class="col-xs-1 text-right label-text">礼品类别：</div> 197 <div class="col-xs-4"> 198 <select class="form-control" id="gifttype" name="gifttype"> 199 <option value="0" selected="selected">商品</option> 200 <option value="1">抽奖</option> 201 </select> 202 </div> 203 <div class="col-xs-1 text-right label-text">单位：</div> 204 <div class="col-xs-4"> 205 <select class="form-control" id="unitcode" name="unitcode"> 206 <#list unitlist as fl> 207 <option value="${fl.unitname}">${fl.unitname}</option> 208 </#list> 209 </select> 210 </div> 211 </div> 212 <div class="row"> 213 <div class="col-xs-1 text-right label-text">市场参考价：</div> 214 <div class="col-xs-4"> 215 <input type="number" step="0.1" class="form-control" 216 id="orignial" name="orignial" value="0" maxlength="10"> 217 </div> 218 <div class="col-xs-1 text-right label-text">库存数量：</div> 219 <div class="col-xs-4"> 220 <input type="number" class="form-control" id="inventory" 221 name="inventory" value="0" maxlength="10"> 222 </div> 223 </div> 224 <div class="row"> 225 <div class="col-xs-1 text-right label-text">所需积分：</div> 226 <div class="col-xs-4"> 227 <input type="number" class="form-control" id="needintegral" 228 name="needintegral" value="0" maxlength="10"> 229 </div> 230 <div class="col-xs-1 text-right label-text">换购金额：</div> 231 <div class="col-xs-4"> 232 <input type="text" class="form-control" id="needamount" 233 name="needamount" value="0" maxlength="10"> 234 </div> 235 </div> 236 <div class="row"> 237 <div class="col-xs-1 text-right label-text">每人限购次数：</div> 238 <div class="col-xs-4"> 239 <input type="number" class="form-control col-xs-3" id="quota" 240 name="quota" value="0" maxlength="50"> 241 <p class="help-desc">(0表示不限制)</p> 242 </div> 243 <div class="col-xs-1 text-right label-text">商品排序：</div> 244 <div class="col-xs-4"> 245 <input type="number" class="form-control" id="ordernum" 246 name="ordernum" value="0" maxlength="50"> 247 </div> 248 </div> 249 <div class="row"> 250 <div class="col-xs-1 text-right label-text">礼品图片：</div> 251 <div class="col-xs-9"> 252 <div class="panel-body" style="border: 1px solid #CCCCCC;"> 253 <div class="row" style="margin-top: 0px !important;"> 254 <div class="col-xs-6" style="height: 100px;"> 255 礼品图片： <span id="GTerr"></span> 256 <p class="help-desc" style="padding: 10px 0px;">(建议尺寸：640 257 x 640 像素；您可以拖拽图片调整图片顺序。)</p> 258 <input id="logo_upload" name="image" type="file" 259 multiple="multiple" style=‘display: none;‘> <input 260 type="text" class="form-control" id="logo" 261 style=‘display: none;‘ maxlength="1024"> 262 </div> 263 <div class="col-xs-6" style="height: 100px;"> 264 <div id="file_queue"></div> 265 </div> 266 </div> 267 <ul id="pics" class="ui-sortable"></ul> 268 <br /> 269 </div> 270 </div> 271 </div> 272 <div class="row"> 273 <div class="col-xs-1 text-right label-text">图文详情：</div> 274 <div class="col-xs-9" style="border: 1px solid #ccc;"> 275 <div id="grt"></div> 276 </div> 277 </div> 278 <div class="row"> 279 <div class="col-xs-1 text-right label-text">礼品参数：</div> 280 <div class="col-xs-9" style="border: 1px solid #ccc;"> 281 <div id="gdt"></div> 282 </div> 283 </div> 284 285 <div class="row"> 286 <div class="sys-form-colbtn" style="text-align: center;"> 287 <span id="errorinfo"></span> 288 <button type="button" class="btn btn-primary" id="btnSub" 289 onclick="clickSave();"> 290 <i class="fa fa-floppy-o"></i> 保存 291 </button> 292 <button type="button" class="btn btn-default" id="btnCancel" 293 onClick="clickCancel();"> 294 <i class="fa fa-times"></i> 取消 295 </button> 296 </div> 297 </div> 298 </div> 299 </div> 300 <input type="text" id="giftrichtext" name="giftrichtext" 301 style="visibility: hidden"> <input type="text" 302 id="giftdesctext" name="giftdesctext" style="visibility: hidden"> 303 </form> 304 </div> 305 <!-- ./Main Parent --> 306 </div> 307 <!-- ./Main Block --> 308 </div> 309 <!-- ./Main --> 310 </div> 311 312 <script type="text/javascript"> 313 /**页面加载执行**/ 314 $(function() { 315 316 317 InitMenus("gift_list"); 318 319 //初始化文件上传的地方; 320 initLogoUpLoad(); 321 322 //初始化富文本的地方; 323 InitControl(); 324 325 initPage(); 326 327 }); 328 329 function initLogoUpLoad() { 330 var control = $("#logo_upload"); 331 //图片排序 332 $("#pics").sortable(); 333 control 334 .uploadify({ 335 id : "logo_upload", 336 buttonClass : "btn btn-primary", 337 debug : false, // 是否开启调试模式 338 auto : true, // 是否自动上传 339 multi : true, // 是否允许多个上传 340 queueID : ‘file_queue‘,//上传图片的DIV 341 fileObjName : "image", //上传的文件对象名，与后台所传参数名保持一致 342 removeCompleted : true, // 上传完毕上传列表是否去除 343 progressData : ‘speed‘, // 进度 percentage或speed 344 buttonText : "选择文件", // flash按钮文字 345 method : ‘post‘, // 提交方法 post或get 346 fileSizeLimit : ‘2MB‘, // 上传文件大小设置 单位可以是B、KB、MB、GB 347 fileTypeExts : ‘.png;.jpg;*.jpge;.bmp;*.gif;‘, // 文件类型 348 swf : "${basepath}/static/scripts/plugins/uploadify/uploadify.swf", // swf位置 349 cancelImg : ‘${basepath}/static/scripts/plugins/uploadify/uploadify-cancel.png‘, 350 width : 82, // flash按钮宽度 351 height : 34, // flash按钮高度 352 fileDesc : ‘请选择 png jpg jpge bmp gif 文件‘, 353 uploader : $.ServerURL.OpenAPIURL 354 + "/catering-openapi/file/upload", // 提交到的处理页面 355 onUploadComplete : function(file) { // 上传完成时事件 356 //$(‘#file_upload‘).uploadify(‘disable‘, true); //设置上传按钮不可用 357 }, 358 onUploadError : function(image, errorCode, errorMsg, 359 errorString) { // 错误提示 360 alert(‘文件： ‘ + image.name + ‘ 导入失败，具体原因：‘ 361 + errorString); 362 }, 363 onFallback : function() { 364 alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。"); 365 }, 366 onUploadSuccess : function(image, data, response) { 367 if (data != null && data != undefined 368 && isNotBlank(data)) { 369 var parsedJson = jQuery.parseJSON(data); 370 if (parsedJson.code != 1) { 371 return; 372 } 373 374 //输出图片地址 375 console.log(parsedJson.host 376 + parsedJson.message); 377 //把图片显示出来 378 var html = "<li><div style=‘position: relative;‘ id=‘dfs‘> <img longdesc = "+parsedJson.message +" src="+parsedJson.host + parsedJson.message+" name=‘mvUrl‘ width=‘100px‘ height=‘80px‘ class=‘myimg‘/><div class=‘del ui-icon-closethick ui-icon‘></div></div></li>"; 379 $("#pics").append(html); 380 } 381 }, 382 onInit : function() { 383 $("#logo_upload-button").removeClass( 384 "uploadify-button").css("line-height", 385 "20px"); 386 }, 387 onUploadStart : function(image) {//FSUpLoadSPATT FSUpLoadSPTLogo 388 389 }, 390 onSelect : function(){ 391 392 393 }, 394 onSelectError : function(file, errorCode, errorMsg) { 395 switch (errorCode) { 396 case -110: 397 alert("文件 [" 398 + file.name 399 + "] 大小超出系统限制的" 400 + jQuery(‘#logo_upload‘).uploadify( 401 ‘settings‘, ‘fileSizeLimit‘) 402 + "大小！"); 403 break; 404 case -120: 405 alert("文件 [" + file.name + "] 大小异常！"); 406 break; 407 case -130: 408 alert("文件 [" + file.name + "] 类型不正确！"); 409 break; 410 } 411 }, 412 }); 413 } 414 415 $(".del").die().live(‘click‘,function(){ 416 //删除改图片 417 console.log( $(this).parent().find("img").attr("longdesc")); 418 commonAjaxReturn($.ServerURL.OpenAPIURL+ "/catering-openapi/file/deleteFile"+ "?fileId=" + $(this).parent().find("img").attr("longdesc")); 419 $(this).parent().parent().remove(); 420 }); 421 422 $(".preview").on({ mouseenter: function () { 423 var src = $(this).parent().find("input").val(); 424 src = "${baseURL}/"+src; 425 $("#testimg").attr("src",src); 426 var left = $(this).position().left; 427 var top = $(this).position().top; 428 $("#imgf").css({left:left,top:top}); 429 $("#imgf").show(); 430 }, mouseleave: function () { 431 432 $("#imgf").hide(); 433 } 434 }); 435 436 function InitControl() { 437 $(‘#grt,#gdt‘).summernote({ 438 lang : ‘zh-CN‘, 439 minHeight : 200, 440 height : 250, 441 dialogsFade : true,// Add fade effect on dialogs 442 dialogsInBody : true,// Dialogs can be placed in body, not in 443 // summernote. 444 disableDragAndDrop : false,// default false You can disable drag 445 // and drop 446 onImageUpload : function(files, editor, welEditable) { //the onImageUpload API 447 448 } 449 }); 450 } 451 452 /*点击保存*/ 453 function clickSave() { 454 //查找DIV pics 下面所有的ul 的src 455 //TODO 这一步之前图片的顺序需要正确 456 $(".myimg") 457 .each( 458 function() { 459 var d = $(this).attr("src"); 460 d = "<input type=‘hidden‘ name=‘giftpicurl‘ class=‘mvurl‘ value="+d+">"; 461 $("#cardAddForm").append(d); 462 console.log(d); 463 }); 464 //判断图片的数量 465 if($(".myimg").length >3){ 466 $.DU_show("errorinfo", "red", "礼品图片最多只能设置3张图片,请删减后再保存!"); 467 return ; 468 } 469 470 //TODO 目前暂时不使用缩略图 所以暂时为空 471 $("#cardAddForm") 472 .append( 473 "<input type=‘hidden‘ name=‘giftpicthumburl‘ class=‘mvurl‘ value=‘‘>"); 474 475 476 $.DU_show("errorinfo", "red", ""); 477 478 // 名称不能为空 479 var unitName = $("#giftname").val(); 480 if (!isNotBlank($.trim(unitName))) { 481 $.DU_show("errorinfo", "red", "请输入名称"); 482 cardAddForm.giftname.focus(); 483 return; 484 } 485 486 //参考价格 487 var orignial = $("#orignial").val(); 488 if (!isNotBlank($.trim(orignial))) { 489 $.DU_show("errorinfo", "red", "请输入市场参考价"); 490 cardAddForm.orignial.focus(); 491 return; 492 } 493 494 //库存数量 495 var inventory = $("#inventory").val(); 496 if (!isNotBlank($.trim(inventory))) { 497 $.DU_show("errorinfo", "red", "请输入库存数量"); 498 cardAddForm.inventory.focus(); 499 return; 500 } 501 502 //所需积分 503 var needintegral = $("#needintegral").val(); 504 if (!isNotBlank($.trim(needintegral))) { 505 $.DU_show("errorinfo", "red", "请输入所需积分"); 506 cardAddForm.needintegral.focus(); 507 return; 508 } 509 510 //商品排序 511 var ordernum = $("#ordernum").val(); 512 if (!isNotBlank($.trim(ordernum))) { 513 $.DU_show("errorinfo", "red", "请输入商品排序"); 514 cardAddForm.ordernum.focus(); 515 return; 516 } 517 //TODO 这里临时默认给图片URL 赋值 518 519 /* //图片不能为空 520 var giftpicurl = $("#giftpicurl").val(); 521 if (!isNotBlank($.trim(giftpicurl))) { 522 $.DU_show("errorinfo", "red", "请输入商品排序"); 523 cardAddForm.giftpicurl.focus(); 524 return; 525 } 526 527 //缩略图不能为空 528 var giftpicthumburl = $("#giftpicthumburl").val(); 529 if (!isNotBlank($.trim(giftpicthumburl))) { 530 $.DU_show("errorinfo", "red", "请输入商品排序"); 531 cardAddForm.giftpicthumburl.focus(); 532 return; 533 } 534 */ 535 536 //检查富文本 537 console.log($("#grt").code()); 538 console.log($("#gdt").code()); 539 540 $("input[name=‘giftrichtext‘]").val($("#grt").code()); 541 $("input[name=‘giftdesctext‘]").val($("#gdt").code()); 542 543 $.DU_show("msgID", "green", "提交中,请稍候..."); 544 //锁定按钮 545 $("#btnSub").attr("disabled", "disabled"); 546 $("#btnCancel").attr("disabled", "disabled"); 547 548 var l_strjson = $(‘#cardAddForm‘).serialize(); 549 var url = $.ServerURL.SiteDomain + $.ServerURL.GiftAdd; 550 551 $.DU_showLoading(); 552 $.ajax({ 553 url : url, 554 type : "POST", 555 dataType : "json", 556 cache : false, 557 data : l_strjson, 558 success : function(msg) { 559 $.DU_hideLoading(); 560 if (msg != null && msg != null && msg != undefined) { 561 if (msg.status == "1") { 562 $.DU_showDialogError(‘提示‘, msg.message); 563 //取消按钮锁定 564 $("#btnSub").removeAttr("disabled"); 565 $("#btnCancel").removeAttr("disabled"); 566 $.DU_show("msgID", "green", ""); 567 } else { 568 parent.$.DU_showDialogSuccessReload("提示", "信息已添加"); 569 console.log(‘${basepath}‘ + ‘/mem/gift/index‘); 570 571 window.location.href = ‘${basepath}‘ 572 + ‘/mem/gift/index‘; 573 } 574 } else { 575 $.DU_showDialogError("提示消息", "保存失败!"); 576 //取消按钮锁定 577 $("#btnSub").removeAttr("disabled"); 578 $("#btnCancel").removeAttr("disabled"); 579 return; 580 } 581 } 582 }); 583 } 584 585 /*点击返回*/ 586 function clickCancel() { 587 window.location.href = ‘${basepath}‘ + ‘/mem/gift/index‘; 588 } 589 </script> 590 </body> 591 </html>
标签：function plugin ror ogre display upload 进度 read jquer
原文地址：http://www.cnblogs.com/maanshancss/p/6305859.html
