同一页面多次使用kindEditor的上传文件——兼容大部分浏览器
2013-12-10 18:09
543 查看
shopPersonalOrshopCompany.js:
KindEditor.ready(function(K) {
array = new Array("taxpayerMaterialId","idMaterialId","taxCertificateMaterialId","ktpMaterialId","businessLicenseMaterialId");
for ( var i = 0; i < array.length; i++) {
if($j("#" + array[i]+"_button")){
$j("#" +array[i]+"_button").click(function(){
$j('.ke-upload-file').trigger("click"); //kindEditor默认自动绑定弹出对话框的按钮
$j('#import_span').attr("data-id", $j(this).attr("id"));//使用一个临时标签,目的是存贮这一次点击触发按钮的id,方便后面使用
});
}
};
var UpBtn = K.uploadbutton({
button: K('#import_button')[0],
fieldName: 'file',
url: baseUrl + '/register/kindEditor/uploadFile?id=' + K('#id').val() ,
afterUpload: function(data) {
if (data !=null) {
var id = $j('#import_span').attr("data-id").split("_")[0];//获得之前存贮在标签里的id,后面赋值
$j("#"+id).val(data.materialId);
$j("#"+id+"_fileName").text(data.fileName);
} else {
alert(data.message);
}
},
afterError: function(str) {
alert('error: ' + str);
}
});
UpBtn.fileBox.change(function(e) {
UpBtn.submit();
});
});
////////////////////////////////////////页面/////////////////////////////////
<link rel="stylesheet" type="text/css" href="${resUrl}/public/components/kindeditor/themes/default/default.css"></link>
<script type="text/javascript" src="${resUrl}/??public/components/kindeditor/kindeditor.js,public/components/kindeditor/lang/zh_CN.js,public/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="${resUrl}/merchant/js/openStore/shopPersonalOrshopCompany.js"></script>
<!--上传文件使用的span,不能删除-->
<span id="import_span" data-id="" style="display:none"><input type="button" id="import_button" value="upload" /></span>
〈!--end--->
<input type="button" id="taxpayerMaterialId_button" class="button borange ml20" value="按钮1"/>
<span id="taxpayerMaterialId_fileName"></span>
<input type="hidden" name="taxpayerMaterialId" id="taxpayerMaterialId"/>
<br/>
<input type="button" id="ktpMaterialId_button" class="button borange ml20" value="按钮2"/>
<span id="ktpMaterialId_fileName"></span>
<input type="hidden" name="ktpMaterialId" id="ktpMaterialId"/>
<br/>
<input type="button" id="businessLicenseMaterialId_button" class="button borange ml20" value="按钮3"/>
<span id="businessLicenseMaterialId_fileName"></span>
<input type="hidden" name="businessLicenseMaterialId" id="businessLicenseMaterialId"/>
KindEditor.ready(function(K) {
array = new Array("taxpayerMaterialId","idMaterialId","taxCertificateMaterialId","ktpMaterialId","businessLicenseMaterialId");
for ( var i = 0; i < array.length; i++) {
if($j("#" + array[i]+"_button")){
$j("#" +array[i]+"_button").click(function(){
$j('.ke-upload-file').trigger("click"); //kindEditor默认自动绑定弹出对话框的按钮
$j('#import_span').attr("data-id", $j(this).attr("id"));//使用一个临时标签,目的是存贮这一次点击触发按钮的id,方便后面使用
});
}
};
var UpBtn = K.uploadbutton({
button: K('#import_button')[0],
fieldName: 'file',
url: baseUrl + '/register/kindEditor/uploadFile?id=' + K('#id').val() ,
afterUpload: function(data) {
if (data !=null) {
var id = $j('#import_span').attr("data-id").split("_")[0];//获得之前存贮在标签里的id,后面赋值
$j("#"+id).val(data.materialId);
$j("#"+id+"_fileName").text(data.fileName);
} else {
alert(data.message);
}
},
afterError: function(str) {
alert('error: ' + str);
}
});
UpBtn.fileBox.change(function(e) {
UpBtn.submit();
});
});
////////////////////////////////////////页面/////////////////////////////////
<link rel="stylesheet" type="text/css" href="${resUrl}/public/components/kindeditor/themes/default/default.css"></link>
<script type="text/javascript" src="${resUrl}/??public/components/kindeditor/kindeditor.js,public/components/kindeditor/lang/zh_CN.js,public/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="${resUrl}/merchant/js/openStore/shopPersonalOrshopCompany.js"></script>
<!--上传文件使用的span,不能删除-->
<span id="import_span" data-id="" style="display:none"><input type="button" id="import_button" value="upload" /></span>
〈!--end--->
<input type="button" id="taxpayerMaterialId_button" class="button borange ml20" value="按钮1"/>
<span id="taxpayerMaterialId_fileName"></span>
<input type="hidden" name="taxpayerMaterialId" id="taxpayerMaterialId"/>
<br/>
<input type="button" id="ktpMaterialId_button" class="button borange ml20" value="按钮2"/>
<span id="ktpMaterialId_fileName"></span>
<input type="hidden" name="ktpMaterialId" id="ktpMaterialId"/>
<br/>
<input type="button" id="businessLicenseMaterialId_button" class="button borange ml20" value="按钮3"/>
<span id="businessLicenseMaterialId_fileName"></span>
<input type="hidden" name="businessLicenseMaterialId" id="businessLicenseMaterialId"/>
相关文章推荐
- 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器
- 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器
- 使用 js 获得上传文件的真实路径 chrome 浏览器 除外
- FireFox浏览器使用Javascript上传大文件
- 使用struts2上传文件时,使用timer拦截器,创建加载页面后,action内创建request对象,报(空指针异常)NullPointException
- Flex progressBar在同一上传功能页面下多次上传中的使用
- 使用struts2在页面局部位置上传文件,不影响其他文本框数据
- Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。
- Java Web中使用JSPSmartUpload控件实现文件的上传和下载(解决了中文乱码问题)(JSP页面采用GBK编码)
- 通过FF、chrom浏览器使用swfupload上传文件出现404错误的解决办法
- ajaxFileUpload.js上传图片插件,全浏览器兼容,规避json错误,带文件格式大小拦截
- 兼容各浏览器的js判断上传文件大小【转】
- 兼容IE8使用ajax上传文件
- 浏览器兼容多文件上传控件
- kindeditor上传文件的使用
- CSS自定义文件上传按钮样式,兼容主流浏览器
- JSP页面使用文件上传图片并且回传显示的注意事项
- 使用input type=file标签进行文件上传时,在安卓手机中的微信浏览器中不能调起相机,但是在苹果手机中的微信浏览器中可以调用相机。解决办法很简单, <input type="file" nam
- net控件中数据导到Excel的格式 首先,我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取它,所以把mime类型设为:application/vnd.ms-excel,当excel读取文件时会以每个cell的格式呈现数据,如果cell没有规定的格式,则excel会以默认的格式去呈现该cell的数据。这样就给我们提供了自定义数据格式的空间,当然我们必须使用excel支持的格式。下面就列出常用的一些格式: 1) 文本
- 【uploadify】使用Uploadify+SpringMVC实现不用From文件页面无刷上传