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的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...
随机推荐
- 历峰集团3.43亿美元收购Net-a-Porter剩余股权_财经_腾讯网
历峰集团3.43亿美元收购Net-a-Porter剩余股权_财经_腾讯网 历峰集团3.43亿美元收购Net-a-Porter剩余股权
- linux中读写锁的rwlock介绍-nk_ysg-ChinaUnix博客
linux中读写锁的rwlock介绍-nk_ysg-ChinaUnix博客 linux中读写锁的rwlock介绍 2013-02-26 13:59:35 分类: C/C++ http://yaro ...
- c#搭建服务端 准备工作(1)
思路 搭建服务器主要为了接收客户端所传来的数据,在学习过程中,整体的搭建逻辑大体分为以下几个步骤: 1.启动线程监听服务端口 2.监听客户端链接并进行处理 3.接收客户端传入的消息 4.向客户端回传( ...
- Dynamics CRM 2013 初体验(1):系统的安装
最近收到Microsoft的Dynamics CRM 2013 beta测试邀请,终于让我掀开了它神秘的面纱.自从去年的Dynamics CRM 2012 December补丁包发布后,系统就添加了很 ...
- lucene定义自己的分词器将其分成单个字符
问题描写叙述:将一句话拆分成单个字符.而且去掉空格. package com.mylucene; import java.io.IOException; import java.io.Reader; ...
- asp.net、html、javascript等比较有用的网站
Learn模块下web.mvc.razor等. http://www.asp.net/ 包括html.javascript.jquery.xml等教程. http://www.w3school.com ...
- oracle习题SQL语句练习
表(一)Student (学生表) 属性名 数据类型 可否为空 含 义 Sno Varchar2(3) 否 学号(主码) Sname Varchar2(8) 否 学生姓名 Ssex Varchar2( ...
- 浅谈Mybatis(三)
一.动态SQL 1.sql片段 解决sql语句的冗余代码问题. <sql id="SELECT_T_USER"> select id,name,password,bir ...
- 将窗口置顶的方法:SetWindowPos、AttachThreadInput、SwitchToThisWindow
将窗口置顶的方法:SetWindowPos.AttachThreadInput.SwitchToThisWindow [转]http://hi.baidu.com/neil_danky/item/f9 ...
- uva 10779 Collectors Problem 网络流
链接 一共有n个人, m种收藏品, 每个人拥有的收藏品的种类和个数都是不相同的. 假设2-n这些人都只和1互相交换, 比例是1:1, 并且, 2-n这些人, 只换自己现在没有的, 如果他现在有第二种, ...