(1) jsp代碼:
<form id="form" name="form" enctype="multipart/form-data" method="post" target="hidden_frame"> <table style="border:0;width:100%;text-align:middle;"> <tr style="border:0;height:20px;width:100%;"> <td style="border:0;width:75px;height:20px;line-height:20px;">控件標識</td> <td> <input id="viewkey" name="viewkey" style="width:200px;" type="text" maxlength="300" placeholder="控件標識不能超過30個字。" class="easyui-validatebox" onkeyup="check()" required="true" missingMessage="參數名稱不可為空."/> </td> </tr> <tr> <td>更新類型</td> <td><input id="type" name="type" class="easyui-combobox" valueField="id" textField="text" panelHeight="auto"/></td> </tr> <tr> <td>備注</td> <td colspan=3> <textarea id="remark" name="remark" onkeyup="check()" placeholder="備注不能超過300個字。" style="width:200px;height:80px;" ></textarea> </td> </tr> <tr> <td>資源文件:</td> <td > <input type="file" id="file" name="file" style="height:25px; width:200px;" onchange="fileChange(this);"> <input type="hidden" name="projectid" id="projectid" > <input type="hidden" name="downimageconfigid" id="downimageconfigid" > <input type="hidden" name="iskeychange" id="iskeychange" > <input type="hidden" name="isnopic" id="isnopic" > <iframe name="hidden_frame" id="hidden_frame" style="display:none"></iframe> </td> </tr> <tr> <td></td> <td><div style="color: red; margin-top: 10px;">圖片大小必須小於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代碼:
/** * 添加下載圖片配置 * @throws IOException */ @RequestMapping(value = "/grid/imgconf/addimgconf",method = {RequestMethod.POST, RequestMethod.GET},produces = {"text/html;charset=UTF-8"}) @ResponseBody public String addImgConf(HttpServletRequest request, HttpServletResponse response, BindException errors) throws IOException{ String m = "00"; MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> fileMap = multipartRequest.getFileMap(); response.setHeader("Access-Control-Allow-Origin", "*"); String projectid = Function.dealNull(multipartRequest.getParameter("projectid")); String viewKey = Function.dealNull(multipartRequest.getParameter("viewkey")); String type = Function.dealNull(multipartRequest.getParameter("type")); String remark = Function.dealNull(multipartRequest.getParameter("remark")); try { //唯一性判斷 int size = imgConfService.getImgConfsCount(Constants.DEF_STRING_NULL, projectid, viewKey, Constants.STATUS_ON); if(size > 0){ m = "02"; logger.info("已存在的控件標識!"); return "<textarea>" + m + "</textarea>"; } //上傳圖片 Map<String, String> picInfo = imgConfService.uploadImage(fileMap); imgConfService.addImgConf(UUID.randomUUID().toString(), projectid, viewKey, type, remark, picInfo.get("URL"), Constants.STATUS_ON); m = "00"; logger.info("添加下載圖片配置成功!"); } catch (Exception e) { m = "01"; logger.error("添加下載圖片配置失敗" ,e); }
//加<textarea>以解決IE下submit後沒有執行回調success函數,這個是jquery easyui form的bug
return "<textarea>" + m + "</textarea>";
}
說明:"<textarea>" + m + "</textarea>";和produces = {"text/html;charset=UTF-8"}解決IE下不能執行回調函數success的問題
以上這篇form+iframe解決跨域上傳文件的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。