遇到的问题总结:

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.相关的代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>礼品定义 - 添加表单</title>
<#include "/./common/headJs.html"/> <link
href="${basepath}/static/scripts/plugins/summernote/summernote.css"
rel="stylesheet">
<link
href="${basepath}/static/scripts/plugins/summernote/summernote-bs3.css"
rel="stylesheet">
<link href="${basepath}/static/scripts/plugins/uploadify/uploadify.css"
rel="stylesheet">
<link
href="${basepath}/static/css/themes/base/jquery.ui.all.css"
rel="stylesheet">
<#include "/./common/footJs.html"/>
<script
src="${basepath}/static/scripts/plugins/jquery/jquery-ui-1.10.3.custom.min.js"></script> <script
src="${basepath}/static/scripts/plugins/summernote/summernote.min.js"></script>
<script
src="${basepath}/static/scripts/plugins/summernote/summernote-zh-CN.js"></script>
<script
src="${basepath}/static/scripts/plugins/uploadify/jquery.uploadify.js"></script>
<style>
ul {
list-style-type: none;
margin: 0;
width: 100%;
} ul li {
width: 120px;
float: left;
} ul li {
list-style-type: none;
} a:hover {
text-decoration: none;
} .col-xs-11 {
padding: 0px !important;
} .form-group {
margin-bottom: 0px;
} .form-control[readonly] {
cursor: inherit;
background-color: #fff;
} .release-goods-title li:hover {
cursor: pointer;
} .release-menu-one {
width: 482px !important;
} .release-menu-one ul li {
cursor: pointer;
} .release-goods-btn input[disabled] {
cursor: not-allowed;
background-color: #7BA9D0;
opacity: 1;
} .col-xs-4 {
padding: 0px !important;
} .col-xs-2 {
padding: 0px !important;
} .col-xs-8 {
padding: 0px !important;
} .col-xs-9 {
padding: 0px !important;
} .label-text {
padding-top: 8px;
} .row {
margin-top: 20px;
} .radio-box {
line-height: 33px;
} #pics {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
height: 110px;
} .del {
position: absolute;
top: 0;
right: 0;
background-color: white;
} .preview, .del {
cursor: pointer;
text-indent: -99999px;
float: left;
margin-left: 20px
} #pics li {
float: left;
display: block;
width: 100px;
height: 80px;
padding: 2px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- Main -->
<div class="sys-main">
<!-- Main Nav -->
<div class="sys-nav">
<div class="minibtnd">
<a id="sys-navMiniBtn" href="javascript:;"><i
class="fa fa-bars"></i></a>
</div>
<ul class="nav navul" id="side-menu"></ul>
</div>
<script type="text/javascript">
var currentURL = '';
</script>
<!-- ./Main Nav --> <!-- Main Block -->
<div class="sys-block"> <!-- Main Nav 2 -->
<div class="sys-nav2">
<div class="posr">
<div class="titd">积分管理</div>
<ul id="side-menu2"> </ul>
<div class="minibtnd2">
<a href="javascript:;"><i class="fa fa-outdent"></i></a>
</div>
</div>
</div>
<!-- ./Main Nav 2 -->
<h2 class="sys-tit">
<i class="fa fa-diamond fa-fw"></i>积分管理<span>/</span>礼品定义<span>/</span>新增
</h2>
<!-- Main Parent -->
<div class="sys-parent">
<form role="form" name="cardAddForm" id="cardAddForm" method="post"
action="">
<div class="promotion_add_box">
<div class="row">
<div class="col-xs-1 text-right label-text">编码:</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="giftcode"
name="giftcode" maxlength="50" readonly="readonly"
value="${code}">
</div>
<div class="col-xs-1 text-right label-text">名称:</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="giftname"
name="giftname" maxlength="64">
</div>
</div>
<div class="row">
<div class="col-xs-1 text-right label-text">礼品类别:</div>
<div class="col-xs-4">
<select class="form-control" id="gifttype" name="gifttype">
<option value="0" selected="selected">商品</option>
<option value="1">抽奖</option>
</select>
</div>
<div class="col-xs-1 text-right label-text">单位:</div>
<div class="col-xs-4">
<select class="form-control" id="unitcode" name="unitcode">
<#list unitlist as fl>
<option value="${fl.unitname}">${fl.unitname}</option>
</#list>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-1 text-right label-text">市场参考价:</div>
<div class="col-xs-4">
<input type="number" step="0.1" class="form-control"
id="orignial" name="orignial" value="0" maxlength="10">
</div>
<div class="col-xs-1 text-right label-text">库存数量:</div>
<div class="col-xs-4">
<input type="number" class="form-control" id="inventory"
name="inventory" value="0" maxlength="10">
</div>
</div>
<div class="row">
<div class="col-xs-1 text-right label-text">所需积分:</div>
<div class="col-xs-4">
<input type="number" class="form-control" id="needintegral"
name="needintegral" value="0" maxlength="10">
</div>
<div class="col-xs-1 text-right label-text">换购金额:</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="needamount"
name="needamount" value="0" maxlength="10">
</div>
</div>
<div class="row">
<div class="col-xs-1 text-right label-text">每人限购次数:</div>
<div class="col-xs-4">
<input type="number" class="form-control col-xs-3" id="quota"
name="quota" value="0" maxlength="50">
<p class="help-desc">(0表示不限制)</p>
</div>
<div class="col-xs-1 text-right label-text">商品排序:</div>
<div class="col-xs-4">
<input type="number" class="form-control" id="ordernum"
name="ordernum" value="0" maxlength="50">
</div>
</div>
<div class="row">
<div class="col-xs-1 text-right label-text">礼品图片:</div>
<div class="col-xs-9">
<div class="panel-body" style="border: 1px solid #CCCCCC;">
<div class="row" style="margin-top: 0px !important;">
<div class="col-xs-6" style="height: 100px;">
礼品图片:&nbsp;<span id="GTerr"></span>
<p class="help-desc" style="padding: 10px 0px;">(建议尺寸:640
x 640 像素;您可以拖拽图片调整图片顺序。)</p>
<input id="logo_upload" name="image" type="file"
multiple="multiple" style='display: none;'> <input
type="text" class="form-control" id="logo"
style='display: none;' maxlength="1024">
</div>
<div class="col-xs-6" style="height: 100px;">
<div id="file_queue"></div>
</div>
</div>
<ul id="pics" class="ui-sortable"></ul>
<br />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-1 text-right label-text">图文详情:</div>
<div class="col-xs-9" style="border: 1px solid #ccc;">
<div id="grt"></div>
</div>
</div>
<div class="row">
<div class="col-xs-1 text-right label-text">礼品参数:</div>
<div class="col-xs-9" style="border: 1px solid #ccc;">
<div id="gdt"></div>
</div>
</div> <div class="row">
<div class="sys-form-colbtn" style="text-align: center;">
<span id="errorinfo"></span>&nbsp;&nbsp;
<button type="button" class="btn btn-primary" id="btnSub"
onclick="clickSave();">
&nbsp;<i class="fa fa-floppy-o"></i> 保存&nbsp;
</button>
<button type="button" class="btn btn-default" id="btnCancel"
onClick="clickCancel();">
<i class="fa fa-times"></i> 取消
</button>
</div>
</div>
</div>
</div>
<input type="text" id="giftrichtext" name="giftrichtext"
style="visibility: hidden"> <input type="text"
id="giftdesctext" name="giftdesctext" style="visibility: hidden">
</form>
</div>
<!-- ./Main Parent -->
</div>
<!-- ./Main Block -->
</div>
<!-- ./Main -->
</div> <script type="text/javascript">
/**页面加载执行**/
$(function() { InitMenus("gift_list"); //初始化文件上传的地方;
initLogoUpLoad(); //初始化富文本的地方;
InitControl(); initPage(); }); function initLogoUpLoad() {
var control = $("#logo_upload");
//图片排序
$("#pics").sortable();
control
.uploadify({
id : "logo_upload",
buttonClass : "btn btn-primary",
debug : false, // 是否开启调试模式
auto : true, // 是否自动上传
multi : true, // 是否允许多个上传
queueID : 'file_queue',//上传图片的DIV
fileObjName : "image", //上传的文件对象名,与后台所传参数名保持一致
removeCompleted : true, // 上传完毕上传列表是否去除
progressData : 'speed', // 进度 percentage或speed
buttonText : "选择文件", // flash按钮文字
method : 'post', // 提交方法 post或get
fileSizeLimit : '2MB', // 上传文件大小设置 单位可以是B、KB、MB、GB
fileTypeExts : '.png;.jpg;*.jpge;.bmp;*.gif;', // 文件类型
swf : "${basepath}/static/scripts/plugins/uploadify/uploadify.swf", // swf位置
cancelImg : '${basepath}/static/scripts/plugins/uploadify/uploadify-cancel.png',
width : 82, // flash按钮宽度
height : 34, // flash按钮高度
fileDesc : '请选择 png jpg jpge bmp gif 文件',
uploader : $.ServerURL.OpenAPIURL
+ "/catering-openapi/file/upload", // 提交到的处理页面
onUploadComplete : function(file) { // 上传完成时事件
//$('#file_upload').uploadify('disable', true); //设置上传按钮不可用
},
onUploadError : function(image, errorCode, errorMsg,
errorString) { // 错误提示
alert('文件: ' + image.name + ' 导入失败,具体原因:'
+ errorString);
},
onFallback : function() {
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
},
onUploadSuccess : function(image, data, response) {
if (data != null && data != undefined
&& isNotBlank(data)) {
var parsedJson = jQuery.parseJSON(data);
if (parsedJson.code != 1) {
return;
} //输出图片地址
console.log(parsedJson.host
+ parsedJson.message);
//把图片显示出来
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>";
$("#pics").append(html);
}
},
onInit : function() {
$("#logo_upload-button").removeClass(
"uploadify-button").css("line-height",
"20px");
},
onUploadStart : function(image) {//FSUpLoadSPATT FSUpLoadSPTLogo },
onSelect : function(){ },
onSelectError : function(file, errorCode, errorMsg) {
switch (errorCode) {
case -110:
alert("文件 ["
+ file.name
+ "] 大小超出系统限制的"
+ jQuery('#logo_upload').uploadify(
'settings', 'fileSizeLimit')
+ "大小!");
break;
case -120:
alert("文件 [" + file.name + "] 大小异常!");
break;
case -130:
alert("文件 [" + file.name + "] 类型不正确!");
break;
}
},
});
} $(".del").die().live('click',function(){
//删除改图片
console.log( $(this).parent().find("img").attr("longdesc"));
commonAjaxReturn($.ServerURL.OpenAPIURL+ "/catering-openapi/file/deleteFile"+ "?fileId=" + $(this).parent().find("img").attr("longdesc"));
$(this).parent().parent().remove();
}); $(".preview").on({ mouseenter: function () {
var src = $(this).parent().find("input").val();
src = "${baseURL}/"+src;
$("#testimg").attr("src",src);
var left = $(this).position().left;
var top = $(this).position().top;
$("#imgf").css({left:left,top:top});
$("#imgf").show();
}, mouseleave: function () { $("#imgf").hide();
}
}); function InitControl() {
$('#grt,#gdt').summernote({
lang : 'zh-CN',
minHeight : 200,
height : 250,
dialogsFade : true,// Add fade effect on dialogs
dialogsInBody : true,// Dialogs can be placed in body, not in
// summernote.
disableDragAndDrop : false,// default false You can disable drag
// and drop
onImageUpload : function(files, editor, welEditable) { //the onImageUpload API }
});
} /*点击保存*/
function clickSave() {
//查找DIV pics 下面所有的ul 的src
//TODO 这一步之前图片的顺序需要正确
$(".myimg")
.each(
function() {
var d = $(this).attr("src");
d = "<input type='hidden' name='giftpicurl' class='mvurl' value="+d+">";
$("#cardAddForm").append(d);
console.log(d);
});
//判断图片的数量
if($(".myimg").length >3){
$.DU_show("errorinfo", "red", "礼品图片最多只能设置3张图片,请删减后再保存!");
return ;
} //TODO 目前暂时不使用缩略图 所以暂时为空
$("#cardAddForm")
.append(
"<input type='hidden' name='giftpicthumburl' class='mvurl' value=''>"); $.DU_show("errorinfo", "red", ""); // 名称不能为空
var unitName = $("#giftname").val();
if (!isNotBlank($.trim(unitName))) {
$.DU_show("errorinfo", "red", "请输入名称");
cardAddForm.giftname.focus();
return;
} //参考价格
var orignial = $("#orignial").val();
if (!isNotBlank($.trim(orignial))) {
$.DU_show("errorinfo", "red", "请输入市场参考价");
cardAddForm.orignial.focus();
return;
} //库存数量
var inventory = $("#inventory").val();
if (!isNotBlank($.trim(inventory))) {
$.DU_show("errorinfo", "red", "请输入库存数量");
cardAddForm.inventory.focus();
return;
} //所需积分
var needintegral = $("#needintegral").val();
if (!isNotBlank($.trim(needintegral))) {
$.DU_show("errorinfo", "red", "请输入所需积分");
cardAddForm.needintegral.focus();
return;
} //商品排序
var ordernum = $("#ordernum").val();
if (!isNotBlank($.trim(ordernum))) {
$.DU_show("errorinfo", "red", "请输入商品排序");
cardAddForm.ordernum.focus();
return;
}
//TODO 这里临时默认给图片URL 赋值 /* //图片不能为空
var giftpicurl = $("#giftpicurl").val();
if (!isNotBlank($.trim(giftpicurl))) {
$.DU_show("errorinfo", "red", "请输入商品排序");
cardAddForm.giftpicurl.focus();
return;
} //缩略图不能为空
var giftpicthumburl = $("#giftpicthumburl").val();
if (!isNotBlank($.trim(giftpicthumburl))) {
$.DU_show("errorinfo", "red", "请输入商品排序");
cardAddForm.giftpicthumburl.focus();
return;
}
*/ //检查富文本
console.log($("#grt").code());
console.log($("#gdt").code()); $("input[name='giftrichtext']").val($("#grt").code());
$("input[name='giftdesctext']").val($("#gdt").code()); $.DU_show("msgID", "green", "提交中,请稍候...");
//锁定按钮
$("#btnSub").attr("disabled", "disabled");
$("#btnCancel").attr("disabled", "disabled"); var l_strjson = $('#cardAddForm').serialize();
var url = $.ServerURL.SiteDomain + $.ServerURL.GiftAdd; $.DU_showLoading();
$.ajax({
url : url,
type : "POST",
dataType : "json",
cache : false,
data : l_strjson,
success : function(msg) {
$.DU_hideLoading();
if (msg != null && msg != null && msg != undefined) {
if (msg.status == "1") {
$.DU_showDialogError('提示', msg.message);
//取消按钮锁定
$("#btnSub").removeAttr("disabled");
$("#btnCancel").removeAttr("disabled");
$.DU_show("msgID", "green", "");
} else {
parent.$.DU_showDialogSuccessReload("提示", "信息已添加");
console.log('${basepath}' + '/mem/gift/index'); window.location.href = '${basepath}'
+ '/mem/gift/index';
}
} else {
$.DU_showDialogError("提示消息", "保存失败!");
//取消按钮锁定
$("#btnSub").removeAttr("disabled");
$("#btnCancel").removeAttr("disabled");
return;
}
}
});
} /*点击返回*/
function clickCancel() {
window.location.href = '${basepath}' + '/mem/gift/index';
}
</script>
</body>
</html>

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

uploadify 图片上传的更多相关文章

  1. uploadify图片上传发生Security Error

    今天在使用uploadify进行图片上传的时候出现security error.其根本原因是flash跨域问题.主要原因是因为配了两个域名www.ttyouni.com 和 ttyouni.com 在 ...

  2. uploadify图片上传配置

    参考:http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html 官网地址:http://www.uploadify.com/ ...

  3. 解决uploadify多图片上传部分图片丢失,且不提示任何错误的问题

    这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...

  4. 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

  5. uploadify插件实现多个图片上传并预览

    使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...

  6. 使用ThinkPHP+Uploadify实现图片上传功能

    首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" ...

  7. 在php中使用jquery uploadify进行多图片上传

    jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...

  8. Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪

    在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...

  9. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

随机推荐

  1. Winform Log4net 配置写不同文件

    以下配置了二种写文件,第一种根据日期写文件yyyyMMdd.txt,第二种是写固定文件login.txt. 1, 下载Log4net组件: http://logging.apache.org/log4 ...

  2. POJ - 2387 Til the Cows Come Home (最短路Dijkstra+优先队列)

    Bessie is out in the field and wants to get back to the barn to get as much sleep as possible before ...

  3. 2019中山大学程序设计竞赛(重现赛) Clumsy Keke

    Problem Description Keke is currently studying engineering drawing courses, and the teacher has taug ...

  4. [Swift实际操作]八、实用进阶-(8)使用performSegue在故事板页面之间进行数据传递

    本文将演示故事板页面之间的数据传递.首先在一个空白项目中,打开项目自带的故事板文件(Main.storyboard).故事板中已经拥有了一个视图控制器,点击选择该视图控制器.然后依此点击[Editor ...

  5. python学习,day3:函数式编程,带return

    return的主要作用就是,在调用的时候,能知道函数的运行情况,相当于打个标签 # coding=utf-8 # Author: RyAn Bi def test1(): print('in the ...

  6. python学习,day1作业:设计一个三级菜单

    设计一个三级菜单,要求能够下钻,能够推出,比较笨的方法 # coding=utf-8 # Author: RyAn Bi data = { 'beijing':{ 'changping':{ 'wud ...

  7. MVC 和 MVR 的区别分析

    MVC模式中,可以将路由绑定到控制器上.MVR是一对一的.路由和控制器是一个东西. 优点是需要被迫处理路由.缺点是不能在控制器被绑定到路由之前复用控制器. [1] node.js - Differen ...

  8. 用matplotlib绘制图像

    实例一: import numpy as np import matplotlib.pyplot as plt x=np.linspace(0,6,100) y=np.cos(2*np.pi*x)*n ...

  9. python计算π及进度条显示

    今天老师布置了一个课后作业,去尽可能的准确计算π的值,还要显示时间和进度条,对于python小白的我,当然是综合书上和网上的知识,自己做了一个小程序,代码如下: 一.写代码的准备工作:用pip下载第三 ...

  10. 转 crs damon can't start 2个例子

    ###sample 1 "node 1 (10.198.127.5): ps -ef|grep ora.crsd root 45613166 47185944 0 10:24:35 pts/ ...