首页 > 代码库 > uploadify 图片上传
uploadify 图片上传
遇到的问题总结:
1.//图片排序
$("#pics").sortable();
2.//上传的文件对象名，与后台所传参数名保持一致,最初因为这个名称错误浪费了许久时间
fileObjName : "image",
3.上传数量控制
提示消息需要到uploadify.js中修改, 修改后发现没有效果;
所以只能在保存的时候做一个判断;
//判断图片的数量
if($(".myimg").length >3){
$.DU_show("errorinfo", "red", "礼品图片最多只能设置3张图片,请删减后再保存!");
return ;
}
4.其它需要注意的问题,js的版本,对应的都修改成高版本的
<link href="http://www.mamicode.com/${basepath}/static/scripts/plugins/uploadify/uploadify.css"
rel="stylesheet">
<link
href="http://www.mamicode.com/${basepath}/static/css/themes/base/jquery.ui.all.css"
rel="stylesheet">
<script
src="http://www.mamicode.com/${basepath}/static/scripts/plugins/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script
src="http://www.mamicode.com/${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: 20px128 }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:;"><i149 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;">(建议尺寸：640257 x 640 像素；您可以拖拽图片调整图片顺序。)</p>258 <input id="logo_upload" name="image" type="file"259 multiple="multiple" style=‘display: none;‘> <input260 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 control334 .uploadify({335 id : "logo_upload",336 buttonClass : "btn btn-primary",337 debug : false, // 是否开启调试模式338 auto : true, // 是否自动上传339 multi : true, // 是否允许多个上传340 queueID : ‘file_queue‘,//上传图片的DIV341 fileObjName : "image", //上传的文件对象名，与后台所传参数名保持一致342 removeCompleted : true, // 上传完毕上传列表是否去除343 progressData : ‘speed‘, // 进度 percentage或speed344 buttonText : "选择文件", // flash按钮文字345 method : ‘post‘, // 提交方法 post或get346 fileSizeLimit : ‘2MB‘, // 上传文件大小设置 单位可以是B、KB、MB、GB347 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.OpenAPIURL354 + "/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 != undefined368 && isNotBlank(data)) {369 var parsedJson = jQuery.parseJSON(data);370 if (parsedJson.code != 1) {371 return;372 }373 374 //输出图片地址375 console.log(parsedJson.host376 + parsedJson.message);377 //把图片显示出来378 var html = "<li><div style=‘position: relative;‘ id=‘dfs‘> <img longdesc = "+parsedJson.message +" src=http://www.mamicode.com/"+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 FSUpLoadSPTLogo388 389 },390 onSelect : function(){391 392 393 },394 onSelectError : function(file, errorCode, errorMsg) {395 switch (errorCode) {396 case -110:397 alert("文件 ["398 + file.name399 + "] 大小超出系统限制的"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 dialogs442 dialogsInBody : true,// Dialogs can be placed in body, not in443 // summernote.444 disableDragAndDrop : false,// default false You can disable drag445 // and drop446 onImageUpload : function(files, editor, welEditable) { //the onImageUpload API 447 448 }449 });450 }451 452 /*点击保存*/453 function clickSave() {454 //查找DIV pics 下面所有的ul 的src455 //TODO 这一步之前图片的顺序需要正确456 $(".myimg")457 .each(458 function() {459 var d = $(this).attr("src");460 d = "<input type=‘hidden‘ name=‘giftpicurl‘ class=‘mvurl‘ value=http://www.mamicode.com/"+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=http://www.mamicode.com/‘‘>");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>
uploadify 图片上传
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。