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.相关的代码:
<!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;">
礼品图片： <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>
<button type="button" class="btn btn-primary" id="btnSub"
onclick="clickSave();">
<i class="fa fa-floppy-o"></i> 保存
</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 图片上传的更多相关文章
- uploadify图片上传发生Security Error
今天在使用uploadify进行图片上传的时候出现security error.其根本原因是flash跨域问题.主要原因是因为配了两个域名www.ttyouni.com 和 ttyouni.com 在 ...
- uploadify图片上传配置
参考:http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html 官网地址:http://www.uploadify.com/ ...
- 解决uploadify多图片上传部分图片丢失，且不提示任何错误的问题
这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...
- 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...
- uploadify插件实现多个图片上传并预览
使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...
- 使用ThinkPHP+Uploadify实现图片上传功能
首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" ...
- 在php中使用jquery uploadify进行多图片上传
jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...
- TinyMCE的使用（包括汉化及本地图片上传功能）
TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...
随机推荐
- ES6——数据结构 Map
数据结构 Map 字典: 用来存储不重复key的 Hash结构.不同于集合(Set)的是,字典使用的是 [键,值] 的形式来存储数据的. JavaScript 的对应那个(Object:{}) 只能用 ...
- 线上 ELK 集群健康值 red 状态问题排查与解决
之前一直运行正常的数据分析平台,最近一段时间没有注意发现日志索引数据一直未生成,大概持续了n多天,当前状态: 单台机器, Elasticsearch(下面称ES)单节点(空集群),1000+shrad ...
- Apache 中httpd.conf文件配置详解（转载）
httpd.conf文件配置详解 Apache的基本设置主要交由httpd.conf来设定管理,我们要修改Apache的相关设定,主要还是通过修改httpd.cong来实现.下面让我们来看看htt ...
- 动态添加select的option [转载]
动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习!首先是定义的select元素://根据ID获得select元素 var mySelect = ...
- fread和fwrite用法小结
fwrite和fread是以记录为单位的I/O函数,fread和fwrite函数一般用于二进制文件的输入输出. #include <stdio.h>size_t fread(void *p ...
- [ActionScript 3.0] 结合FMS实现简单视频录制
首先在本机上安装Flash Media Server,简称FMS,在测试过程中window防火墙开启可能有影响,可先关闭防火墙,FMS安装好后检查相关服务有没有启动,若没有,可启动任务管理器,点击服务 ...
- replace函数结合正则表达式实现转化成驼峰与转化成连接字符串的方法
//连接符转成驼峰写法 function toCamel(str){ var reg=/-(\w)/g; return str.replace(reg,function(){ return argum ...
- 高阶篇：4.2）DFMEA设计失效模式和失效后果分析-总章
本章目的:了解FMEA和DFMEA的概念. 1.什么是FMEA(what) 潜在的失效模式及后果分析(Potential Failure Mode and Effects Analysis,简称FME ...
- 2019 CCPC-Wannafly Winter Camp Day2(Div2, onsite)
solve 4/11 A Erase Numbers II Code:KK Thinking :KK 用ans表示当前最优答案,maxx表示遍历到的最大数字,一开始ans肯定等于a[ 1 ]+a[ 2 ...
- GCC 7.3.0版本编译http-parser-2.1问题
http-paser是一个用c编写的http消息解析器,地址:https://github.com/nodejs/http-parser,目前版本2.9 今天用gcc 7.3.0编译其2.1版本时,编 ...