easyui form提交文件(上传图片和文件)
<div id="dialogBtn">
<a class="easyui-linkbutton" href="#" onclick="addNotice()">确定</a>
<a class="easyui-linkbutton" href="#"
onclick="closeDialog();">取消</a>
</div> <div id="addNotice" class="easyui-dialog" title="添加/编辑"
style="width: 1000px; height: 650px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#dialogBtn'">
<div style="padding: 10px 0 10px 60px">
<form id="noticeForm" method="post" enctype="multipart/form-data">
<input type="hidden" id="webId" name="webId" />
<input type="hidden" name="websiteMessage.usreId"
value="${login_session_key.id }" />
<table>
<tr>
<td>
标  题：
</td>
<td >
<input class="easyui-validatebox"
style="width: 149px; height: 20px; border: 1px solid #ccc;"
type="text" name="websiteMessage.title"></input>
</td> </tr> <tr>
<td>
发布方式：
</td>
<td >
<select id="method" class="easyui-combobox"
name="websiteMessage.publishType" panelHeight="auto"
style="width: 150px;" editable="false" required="true">
<option value="1">站内公告</option>
<option value="2">系统公告</option>
</select>
</td> </tr>
<tr>
<td>
信息类型：
</td>
<td id="upId">
<select id="type" class="easyui-combobox"
name="websiteMessage.mtype" panelHeight="auto"
style="width: 150px;" editable="false" required="true">
</select>
</td>
</tr>
<tr>
<td>
内  容：
</td>
<td id="addUploadId"> <div id="systemNoticeMoren" style="overflow: hidden;">
<textarea id="morenContent"
style="width: 582px; height: 116px; border: 1px solid #ccc;" ></textarea>
</div> </td>
</tr>
</table>
</form>
</div>
</div> <script type="text/javascript"><!--
var editxt={};//存储修改的时候的div
var xt={};//存储系统公告的的 id > div1,div2...
var i=1;
var hasUpload=false;
var hasMorenContent=true;//默认的编辑框
var hasXtContent=false;//默认的编辑框
var thisWebSiteMessageId=-1;
var arr={};
arr[1]="媒体报道";
arr[2]="网站公告";
arr[3]="成功案例";
arr[4]="站内信息"; //普通的文本框，没有带上传功能
var morenContent="<div id='systemNoticeMoren' style='overflow: hidden;'> <textarea id='morenContent' style='width: 582px; height: 116px; border: 1px solid #ccc;' ></textarea> </div>";
var okImg="<img alt='' src='/images/oo.gif'/>";
var errorImg="<img alt='' src='/images/xx.gif'/>";
$(function(){ var method=$('#method');
var type=$('#type');
method.combobox({
onSelect:function(ele){
resetWebId();
if(ele.value==1){
if(!hasMorenContent){
$('#addUploadId').append(morenContent);
hasMorenContent=true;
}
if(hasXtContent){
$('#systemNoticeXt').remove();
hasXtContent=false;
} $.each(xt,function(index,ele){
$('#systemNoticeXt'+index).remove();
});
//恢复参数配置
resetCash();
//移除添加消息的按钮
$('#systemNoticeUpload').remove(); type.combobox('clear');
type_1(type);
}
else if(ele.value==2){
type.combobox('clear');
type_2(type);
//移除默认的编辑框
$('#systemNoticeMoren').remove();
hasMorenContent=false;
//绑定系统公告编辑框
if(!hasXtContent){
// var xtContent="<div id='systemNoticeXt' style='overflow: hidden;'> <textarea id='xtContent' style='width: 582px; height: 116px; border: 1px solid #ccc;' ></textarea> "
//+"<img alt='' src='/images/xx.gif'><input id='file' name='file' type='file' value='选择文件'/> </div>";
hasXtContent=true;
}
}
}
});
}); function type_1(type){
type.combobox({
valueField: 'id',
textField: 'value',
data: [{
id: '4',
value: '站内信息',
selected:true
}],
onSelect:function(rec){
resetWebId();
}
});
}
function type_2(type){
type.combobox({
valueField: 'id',
textField: 'value',
data: [{
id: '1',
value: '媒体报道',
selected:true
},{
id: '2',
value: '网站公告'
},{
id: '3',
value: '成功案例'
}],
onSelect:function(rec){
resetWebId();
var noticeId=rec.id;
if(noticeId==1||noticeId==3||noticeId==2){ if(!hasUpload)
{ hasUpload=true;
$('#upId').append('<a id="systemNoticeUpload" href="#" onclick="addDiv();">添加消息</a>');
}
$.each(xt,function(index,ele){
$('#systemNoticeXt'+index).remove();
}); //恢复参数配置
xt={};//存储系统公告的的 id > div1,div2...
i=1;
hasXtContent=false;
}else{
if(hasUpload)
{ hasUpload=false;
$('#systemNoticeUpload').remove();
}
}
}
});
} function openNotice(){
resetCash();
$('#noticeForm').form('reset');
$('#addNotice').dialog('open');
$('#webId').val('');
type_1($('#type'));
}
function addNotice(){
var time;
var selectId=$('#method').combobox('getValue');
var noticType=$('#type').combobox('getValue');
var paramsId=$("#webId").val();
if(selectId==1){
//站内信息
if(paramsId==null||paramsId==''){
$('#noticeForm').form('submit', {
url:'<%=basePath%>admin/notice/notice!add.ds',
onSubmit: function(param){
param["websiteMessage.MContent"]=$('#morenContent').val();
param["comId"]=1;//表示选中第一个 2：系统公告 ，1：站内信息 } ,
success:function(data){
var json=$.parseJSON(data);
$.messager.alert('温馨提示',json.message,'info');
if(json.success){
$('#sysdatabase').datagrid('reload');
}
}
});
}else{
var data={
'webId':paramsId,
'websiteMessage.title':$("input[name='websiteMessage.title']").val(),
'websiteMessage.MContent':$("#morenContent").val(),
"comId":1
}
$.post('/admin/notice/notice!add.ds',data,function(data){
$.messager.alert('温馨提示',data.message,'info');
if(data.success){
$('#sysdatabase').datagrid('reload');
}
},"json");
}
}
else if(selectId==2){
//添加消息 comId=2
if(xt){
$.each(xt,function(index,ele){
var isSubmit=true;
//检查文件
var f=document.getElementById('file'+index).files;
if(f.length>0){
var filename=$('#file'+index).val();
var suffix=filename.substring(filename.lastIndexOf("."),filename.length);
//.jpg,.png,.peng,.gif,.mp4,avi
if(suffix!=".png"&&suffix!=".jpeg"&&suffix!=".jpg"&&suffix!=".gif"&&suffix!=".avi"&&suffix!=".mp4"){
alert("文件格式不对，请选择格式【.jpg,.png,.peng,.gif,.mp4,avi】的文件");
isSubmit=false;
}
if(suffix==".png"||suffix==".jpeg"||suffix==".jpg"||suffix==".bmp"||suffix==".gif"){
var filesize=f.size/1024;//KB
if(parseInt(filesize)>1024){
alert('图片不能大于1M');
isSubmit=false;
}
}
if(suffix==".avi"||suffix==".mp4"){
var filesize=f.seize/1024/1024;//M
if(filesize>20){
alert('视频不能大于20M');
isSubmit=false;
}
}
}
//提交文件
if(isSubmit){
var getFile=$('#file'+index);
$('#noticeForm').form('submit',{
url:'<%=basePath%>admin/notice/notice!add.ds',
onSubmit:function(pa){
pa["comId"]=2;//表示选中第一个 2：系统公告 ，1：站内信息
pa["websiteMessage.MContent"]=$('#xtContent'+index).val();
//获取是否选择文件
var f = document.getElementById("file"+index).files.length;
if(f>0)
{
pa["file"]=getFile.attr('name','file');//更改文件的nam属性
pa["fileName"]=$('#file'+index).val();
} pa["noticType"]=noticType;
pa["uploadCount"]=index;//索引值
},
success:function(data){
data=$.parseJSON(data);
if(data.success){
$('#systemNoticeXt'+index).append(okImg);
}
else{
$('#systemNoticeXt'+index).append(errorImg);
if(data.code==-1)
$('#systemNoticeXt'+index).append("<font color='red'>"+data.message+"</font>");
}
}
});
}
//还原文件的名字
$('#file'+index).attr('name','file'+index);//更改文件的nam属性
//设置时间，避免得到重复值
time=setInterval(function(){},1000);
});
}<%--else if(editxt){ $.each(editxt,function(index,ele){
var eisSubmit=true;
//检查文件
var ef=document.getElementById('file'+index).files;
if(ef.length>0){
var efilename=$('#file'+index).val();
var esuffix=efilename.substring(efilename.lastIndexOf("."),efilename.length);
//.jpg,.png,.peng,.gif,.mp4,avi
if(esuffix!=".png"&&esuffix!=".jpeg"&&esuffix!=".jpg"&&esuffix!=".gif"&&esuffix!=".avi"&&esuffix!=".mp4"){
alert("文件格式不对，请选择格式【.jpg,.png,.peng,.gif,.mp4,avi】的文件");
eisSubmit=false;
}
if(esuffix==".png"||esuffix==".jpeg"||esuffix==".jpg"||esuffix==".bmp"||esuffix==".gif"){
var efilesize=ef.size/1024;//KB
if(parseInt(efilesize)>1024){
alert('图片不能大于1M');
eisSubmit=false;
}
}
if(esuffix==".avi"||esuffix==".mp4"){
var efilesize=ef.seize/1024/1024;//M
if(efilesize>20){
alert('视频不能大于20M');
eisSubmit=false;
}
}
}
//提交文件
if(eisSubmit){
var egetFile=$('#file'+index);
$('#noticeForm').form('submit',{
url:'<%=basePath%>admin/notice/notice!add.ds',
onSubmit:function(pa){
pa["comId"]=2;//表示选中第一个 2：系统公告 ，1：站内信息
pa["websiteMessage.MContent"]=$('#xtContent'+index).val();
pa["webId"]=$('#webId').val();
//获取是否选择文件
var af = document.getElementById("file"+index).files.length;
if(af>0)
{
pa["file"]=egetFile.attr('name','file');//更改文件的nam属性
pa["fileName"]=$('#file'+index).val();
} pa["noticType"]=noticType;
pa["uploadCount"]=index;//索引值
},
success:function(data){
data=$.parseJSON(data);
if(data.success){
$('#systemNoticeXt'+index).append(okImg);
}
else{
$('#systemNoticeXt'+index).append(errorImg);
if(data.code==-1)
$('#systemNoticeXt'+index).append("<font color='red'>"+data.message+"</font>");
}
}
});
}
//还原文件的名字
$('#file'+index).attr('name','file'+index);//更改文件的nam属性
//设置时间，避免得到重复值
time=setInterval(function(){},1000);
});
}--%>
//刷新表格
$('#sysdatabase').datagrid('reload');
}
clearInterval(time);
} //添加系统公告的div
function addDiv(){
var xtContent="<div id='systemNoticeXt"+i+"' style='overflow: hidden;'> <textarea id='xtContent"+i+"' style='width: 582px; height: 116px; border: 1px solid #ccc;' ></textarea> "
+"<a href='#' onclick='removeDiv("+i+");'><img alt='' src='/images/remove1.gif'></a><input id='file"+i+"' name='file"+i+"' type='file' value='选择图片'/> </div>";
$('#addUploadId').append(xtContent);
var arrDiv={};
arrDiv["systemNoticeXt"+i]="systemNoticeXt"+i;
arrDiv["xtContent"+i]="xtContent"+i;
arrDiv["file"+i]="file"+i;
xt[i]=arrDiv;
i++;
}
function removeDiv(divID){
$('#systemNoticeXt'+divID).remove();
delete xt[divID];
}
function editNotice(){
var j=$("#sysdatabase").datagrid("getSelected");
if(!j){
$.messager.alert("温馨提示","请选择一行数据","info");
return ;
}
var publishType=j.publishType;
if(publishType==1){
$('#noticeForm').form('load',{
"websiteMessage.title":j.title,
"websiteMessage.mtype":arr[j.mtype],
"websiteMessage.publishType":j.publishType,
"websiteMessage.MContent":j.MContent,
"webId":j.id
});
$('#morenContent').val(j.MContent);
$('#addNotice').dialog('open');
}
else if(publishType==2){
$.messager.alert('温馨提示','系统公告不能修改','info');
}
} function deleteNotice(){
var data=$('#sysdatabase').datagrid('getSelected');
if(!data){
$.messager.alert('温馨提示','请选择数据','info');
return;
}
$.messager.confirm('确认对话框','是否删除？',function(r){
if(r){
$.post('<%=basePath%>admin/notice/notice!delete.ds',{"id":data.id},function(d){
$.messager.alert('温馨提示',d.message,'info');
if(d.success)
$('#sysdatabase').datagrid('reload');
});
}
});
}
function closeDialog(){
$('#addNotice').dialog('close');
resetCash();
}
//恢复参数
function resetCash(){
//初始化参数
$.each(xt,function(index,ele){
$('#systemNoticeXt'+index).remove();
});
$('#systemNoticeUpload').remove();
xt={};//存储系统公告的的 id > div1,div2...
i=1;
hasUpload=false;
hasMorenContent=true;//默认的编辑框
hasXtContent=false;//默认的编辑框
resetWebId();
}
function resetWebId(){
$.post('<%=basePath%>admin/notice/notice!resetWebId.ds');
} </script>
java
上传
/**
*
* 基于struts2的文件上传
* @param file 源文件
* @param fileName 文件名
* @param path 路径 : /xx/
*/
public static String struts2uploadfile(File file,String fileName,String path) throws IOException{
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");// 格式化时间输出
String Rname = sdf.format(new Date());// 取得当前时间，Date()是java.util包里的，这作为真实名称
if(StringUtils.isNotBlank(fileName)){
String realPath=ServletActionContext.getServletContext().getRealPath(path);
File f=new File(realPath);
if(!f.getParentFile().exists()){
f.getParentFile().mkdirs();
}
String houzhui=fileName.substring(fileName.lastIndexOf("."), fileName.length());
Rname+=houzhui;
File saveFile=new File(f, Rname);
FileUtils.copyFile(file, saveFile);
}
return path+Rname;
}
easyui form提交文件(上传图片和文件)的更多相关文章
- easyui form提交和formdata提交记录
1 easyui form提交 $('form').form('submit',{ url:''; onSubmit:''; success:function(data){ //这种方法获取到的da ...
- EasyUI Form提交后json数据IE上需要下载（转）
EasyUI Form提交后json数据IE上需要下载(转) 在使用EasyUI的form中的submit方法时,返回json在IE中变成提示下载的问题,代码如下: $('#fileForm'). ...
- easyui form 提交问题，纠结了很久，有点诡异
http://www.iteye.com/problems/131602 form 提交,后台运行有时慢,页面就不等后台数据的响应,直接alert("服务器维护中,请稍后再试!") ...
- Easyui form提交后input清空的方法
先上解决办法: $(#formid #inputid).val("") 将这个代码放在提交按钮最后就可以了. 我在做一个修改信息的功能时,发现上一次提交的内容在下一次打开的记录里又 ...
- easyui form提交时验证必填，打开时不显示必填提示
给textbox添加required:true属性后,打开页面时整个表单都是红的,需要将其设置为提交时再验证. 解决方法:通过textbox的novalidate属性来控制是否开启验证 <inp ...
- form表单系列中文件上传及预览
文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...
- ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）
我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...
- Ajax提交form表单内容和文件（jQuery.form.js）
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
- sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象，同时需要携带其他参数
今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...
随机推荐
- 【POJ】2528 Mayor's posters ——离散化+线段树
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Description The citizens of Bytetown, A ...
- applet部署，无需修改客户端设置。
1 开发applet程序,编译成jar包 2 给jar包做数字签名: (1).用keytool生成密钥: keytool -genkey -keystore myapplet.keystore - ...
- mongodb cpu 超过100%居高不下的原因分析过程
-- mongodb cpu is high, infomation as below: 1 the message in the http://10.100.1.11:28017/ as below ...
- 利用Telnet来模拟Http请求 有GET和POST两种
利用Telnet来模拟Http请求---访问百度. 1.打开"运行"->cmd进入命令环境: 2.输入"telnet www.baidu.c ...
- Facebook、新浪微博、Twitter、腾讯微博分享代码
最近总结一下用到的分享代码 FaceBook分享 <a href="https://www.facebook.com/sharer/sharer.php?u=你的链接" ta ...
- vtp——vlan trunk protcal
server模式——服务器模式,在该模式下可以建立vlan,删除vlan,该模式下的vlan可以下发到其他的交换机 client模式——客户端模式,被动模式.交换机可以接受从server模式下传来的v ...
- android入门——UI(3)
Spinner控件 ListView控件 一.Spinner控件 点击Spinner会弹出一个包含所有可选值的dropdown菜单,从该菜单中可以为Spinner选择一个新值. 有两种指定数据源的 ...
- 【转】Java保留固定小数位的4种方法
package com.test; import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.Numb ...
- intellj idea 如何设置类头注释和方法注释
intellj idea 如何设置类头注释和方法注释 intellj idea的强大之处就不多说了,相信每个用过它的人都会体会到,但是我们也会被他的复杂搞的晕头转向,尤其刚从ecl ...
- ThinPHP第二十八天(F函数和file_put_contents区别|PHP生成PHP文件,Kindeditor编辑器使用方法)
1.F(name,data,path)函数和file_put_contents(file,str)区别 F函数直接生成<?php ?>格式的php文件了,将data加入到<?php和 ...