uploadify 图片上传

遇到的问题总结:
1.//图片排序
$("#pics").sortable();
2.//上传的文件对象名，与后台所传参数名保持一致,最初因为这个名称错误浪费了许久时间
fileObjName : "image",
3.上传数量控制
提示消息需要到uploadify.js中修改, 修改后发现没有效果;
所以只能在保存的时候做一个判断;
//判断图片的数量
if($(".myimg").length >3){
$.DU_show("errorinfo", "red", "礼品图片最多只能设置3张图片,请删减后再保存!");
return ;
}
4.其它需要注意的问题,js的版本,对应的都修改成高版本的
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                                                 礼品图片：&nbsp;<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>&nbsp;&nbsp;
288                                     <button type="button" class="btn btn-primary" id="btnSub"
289                                         onclick="clickSave();">
290                                         &nbsp;<i class="fa fa-floppy-o"></i> 保存&nbsp;
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>
View Code
6.在WEB-INF 下面添加文件 crossdomain.xml
<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
<allow-access-from domain="192.168.1.241" />
<allow-access-from domain="120.77.232.65" />
<allow-access-from domain="127.0.0.1" />
<allow-access-from domain="192.168.1.6" />
</cross-domain-polic