(1) jsp代码：
<form enctype="multipart/form-data" method="post" target="hidden_frame"> <table> <tr> <td>控件标识</td> <td> <input type="text" maxlength="300" placeholder="控件标识不能超过30个字。" onkeyup="check()" required="true" missingMessage="参数名称不可为空."/> </td> </tr> <tr> <td>更新类型</td> <td><input valueField="id" textField="text" panelHeight="auto"/></td> </tr> <tr> <td>备注</td> <td colspan=3> <textarea onkeyup="check()" placeholder="备注不能超过300个字。" ></textarea> </td> </tr> <tr> <td>资源文件：</td> <td > <input type="file" onchange="fileChange(this);"> <input type="hidden" > <input type="hidden" > <input type="hidden" > <input type="hidden" > <iframe></iframe> </td> </tr> <tr> <td></td> <td><div>图片大小必须小于500K。</div></td> </tr> </table> </form>
说明：form中的target指向iframe中的name。这点要注意。
(2) js代码：
//添加对话框 function initDialog(){ $('#imgconf-dialog').dialog({ modal:true, closable:false, top: 20, buttons:[{ id:'ut_add', text:'确定', iconCls:'icon-ok', handler:function(){ //表单注册事件 $('#form').form({ success:function(data){//提交成功后的回调函数 if(data === '00'){ jqueryAlert('操作成功'); } if(data === '03'){ $.messager.alert(global.title,'主键为空!','warning'); $('#ut_add').linkbutton('enable'); return; } if(data === '02'){ $.messager.alert(global.title,'已存在的控件标识!','warning'); $('#ut_add').linkbutton('enable'); return; } if(data === '01'){ $.messager.alert(global.title,'操作失败','warning'); $('#ut_add').linkbutton('enable'); return; } $('#imgconf-dialog').dialog('close'); //重新加载列表 getDataGridData();; } }); $('#ut_add').linkbutton('disable'); //【添加】 if(global.operatype == 'add'){ if($('#viewkey').val() == null || $('#viewkey').val() == ''){ $.messager.alert(global.title,'您尚未输入控件标识!','warning'); $('#ut_add').linkbutton('enable'); return; } if($('#file').val() == ''){ $.messager.alert(global.title,'您尚未上传图片!!','warning'); $('#ut_add').linkbutton('enable'); return; } //表单上传操作 $('#projectid').val(global.projectid); $('#form').attr("action", global.web_path + "/grid/imgconf/addimgconf.do"); $("#form").submit(); $('#ut_add').linkbutton('disable'); } else {//【编辑】 //控件标识是否改变 var iskeychange; if(selected.viewkey == $('#viewkey').val()){//控件标识没有改变 iskeychange = 'no'; }else{ iskeychange = 'yes'; } var isnopic; if($('#file').val() == ''){//是否有上传图片 snopic = 'yes'; }else{ isnopic = 'no'; } //表单上传操作 $('#projectid').val(global.projectid); $('#downimageconfigid').val(selected.downimageconfigid); $('#iskeychange').val(iskeychange); $('#isnopic').val(isnopic); $('#form').attr("action",global.web_path + "/grid/imgconf/modimgconf.do"); $("#form").submit(); ; $('#ut_add').linkbutton('disable'); } } },{ id:'ut_close', text:'退出', handler:function(){ $('#ut_add').linkbutton('enable'); $('#imgconf-dialog').dialog('close'); $('#uploadify').uploadifyClearQueue(); } }] }); } //重置 function reset(){ $('#ut_add').linkbutton('enable'); var target = $('#file'); if(global.operatype == 'mod'){ $('#imgconf-dialog').dialog('setTitle','修改'); $('#viewkey').val(selected.viewkey); $('#type').combobox('setValue', selected.type); $('#remark').val(selected.remark); $('#imgconf-dialog').dialog('open'); //文件上传清空 deleteFile('file'); }else { $('#imgconf-dialog').dialog('setTitle','添加'); $('#viewkey').val(''); $('#remark').val(''); //文件上传清空 deleteFile('file'); } } /** * 文本区域限制长度 */ function check(){ var content = $('#remark').val(); len = content.length; var maxlen = 300; if(len > maxlen){ alert("字数太长，已被截断为300字!"); $('#remark').val(content.substr(0,maxlen)); } } // input type='file'置位操作 function deleteFile(file){ var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox if(ie){ refreshUploader($("input[name="+file+"]")[0]); } else{ $("input[name="+file+"]").attr("value",""); } } function refreshUploader(file){ var file2= file.cloneNode(false); file2.onchange= file.onchange; file.parentNode.replaceChild(file2,file); } //检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value))) { alert("只允许上传jpg|gif|png|jpeg格式的图片"); if(window.ActiveXObject) {//for IE target.select();//select the file ,and clear selection document.selection.clear(); } else if(window.opera) {//for opera target.type="text";target.type="file"; } else target.value="";//for FF,Chrome,Safari return; } else { return; //alert("ok");//or you can do nothing here. } //检测上传文件的大小 var isIE = /msie/i.test(navigator.userAgent) && !window.opera; var fileSize = 0; if (isIE && !target.files){ var filePath = target.value; var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); var file = fileSystem.GetFile (filePath); fileSize = file.Size; } else { fileSize = target.files[0].size; } var size = fileSize / 1024; if(size>(500)){ alert("文件大小不能超过500KB"); if(window.ActiveXObject) {//for IE target.select();//select the file ,and clear selection document.selection.clear(); } else if(window.opera) {//for opera target.type="text";target.type="file"; } else { target.value="";//for FF,Chrome,Safari } return; }else{ return; } }
(3) 后台java代码：