uploadify 图片上传
Posted maanshancss
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uploadify 图片上传相关的知识，希望对你有一定的参考价值。
遇到的问题总结:
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 以上是关于uploadify 图片上传的主要内容，如果未能解决你的问题，请参考以下文章jquery.uploadify.js修改时，怎么判断上传了几张图片