ajaxform无刷新上传
/******************************************************************************* * * ajax提交form * ******************************************************************************//* 调用示例，在看不懂也没办法了 $(function(){ var tempHTML = '<input type="text" id="aaa" value/><input name="file1" type="file" />'+ "<input type="button" onclick="ajaxSub" value="update">"+ '<div id="output2"></div>'; createForm('asdfe','dddd',tempHTML,'checkddd()'); initParam("/ajaxmodel/default/upload"); createForm('asdfe1','aaaaaaaaaa',tempHTML,''); initParam("/ajaxmodel/default/upload"); } ) function checkddd(){var ddasd = $("#aaa").val();if(ddasd){return true;}else{alert('请填写');return false;} }*//* * <div id="output2"></div> * <form method="post" id="educationalForm" name="educationalForm"> <input type="file" id="educational" name="educational" title="请上传您的学历证明" default='uploadImg' onChange="Javascript:checkpic(this)"/> </form> <input type="hidden" id="educationalHi" name="educationalHi" /> * * <script> $(function(){ initParamForm("<{$BASE_URL}>ajaxmodel/default/upload","educationalForm"); initParamForm("<{$BASE_URL}>ajaxmodel/default/upload","stationForm"); initParamForm("<{$BASE_URL}>ajaxmodel/default/upload","physicianForm"); initParamForm("<{$BASE_URL}>ajaxmodel/default/upload","professionalForm"); initParamForm("<{$BASE_URL}>ajaxmodel/default/upload","identificationForm");})function checkpic(obj){ var formid = obj.name+"Form"; var hid = obj.name+"Hi"; fileObj = obj; ajaxSub(formid,"");} </script> * *///file控件的对象var fileObj = null;// 动态创建的formidvar yuanpengform = "";//上传成功后返回的图片ID 隐藏表单的IDvar ypimghhid = "";/** * 初始化参数 * * subUrl 提交的action,需要返回的图片ID * */function initParam(subUrl,imghidden) {ypimghhid = imghidden;var options = {target : '#output2',beforeSubmit : showRequest,url : subUrl,success : showResponse};$('#' + yuanpengform).submit(function() {$(this).ajaxSubmit(options);return false;// 阻止表单提交});}/** * 初始化参数 手动创建form * * subUrl 提交的action,from id,需要返回的图片ID * */function initParamForm(subUrl,formid) {var options = {target : '#output2',beforeSubmit : showRequest,url : subUrl,success : showResponse};$('#' + formid).submit(function() {$(this).ajaxSubmit(options);return false;// 阻止表单提交});}/** * * 提交表单 * */function ajaxSub(formid, method) {var flag = true;if (method != '') {if (!eval(method)) {flag = false;}}if (flag) {$('#' + formid).submit();}}/** * * 回调函数 ajax请求时会调用此方法 form的数据，jqForm jquery表单对象，options 初始化的参数 * */function showRequest(formData, jqForm, options) {waitting();var queryString = $.param(formData);return true;}/** * * 回调函数 ajax提交成功后调用 * * responseText 返回输出的结果，statusText 执行是否成功 * */function showResponse(responseText, statusText,xhr) {removeAll();if(showError(error)){var error = $("#uploaderror").html();if(error == "no"){alert("上传失败，您选择的图片大小或者类型不符合要求!");cleanFile(fileObj.name);var objhidden = $("input[name='"+fileObj.name+"Hi']"); objhidden.val("");}else{//alert("恭喜您，上传成功!");var objhidden = $("input[name='"+fileObj.name+"Hi']");objhidden.val(error);}}}function showError(error){return true;}function checkPicResponse(responseText, statusText,xhr) {try{var error = $("#uploaderror").html();var jsonss = jQuery.parseJSON(error);var flag = true;var filename = "";if(jsonss != null){for(var i=0;i<jsonss.length;i++){if(jsonss[i][1] != 1){flag = false;filename = jsonss[i][0];break;}}}else{flag = false;}if(!flag){if(filename==""){filename = fileObj.name;}var obj = $("input[name='"+filename+"']"); obj.val("");alert("上传失败，您选择的图片大小或者类型不符合要求!");}else{alert("恭喜您，上传成功!");$("#"+ypimghhid).val(error);}}catch(e){alert("上传失败，请稍后再试!");}}/** * * 动态创建form target 指定在那里添加form，formid 表单的id ，varhtml 自定义的表单元素,method 调用外部注入的方法 * */function createForm(target, formid, varhtml, method) {yuanpengform = formid;varhtml = varhtml.replace("ajaxSub", "ajaxSub('" + yuanpengform + "','"+ method + "')");var tempHtml = '<form method="post" name="' + yuanpengform + '" id="'+ yuanpengform + '" >' + varhtml + '</form>';$("#" + target).html(tempHtml);}function cleanFile(id){ var _file = document.getElementById(id); if(_file.files){ _file.value = ""; }else{ if (typeof _file != "object"){ return null; } var _span = document.createElement("span"); _span.id = "__tt__"; _file.parentNode.insertBefore(_span,_file); var tf = document.createElement("form"); tf.appendChild(_file); document.getElementsByTagName("body")[0].appendChild(tf); tf.reset(); _span.parentNode.insertBefore(_file,_span); _span.parentNode.removeChild(_span); _span = null; tf.parentNode.removeChild(tf); }}function ajaxupload(obj){var formid = obj.name+"Form";var hid = obj.name+"Hi";fileObj = obj;ajaxSub(formid,"");}function waitting(){if($("#WaitIfrmaer").length>0){$("#WaitIfrmaer").eq(0).remove();$("#waiter").eq(0).remove();$("#WaitImager").eq(0).remove()}//注册DIVvar WaitDiv=document.createElement("div");WaitDiv.setAttribute("id","waiter");//注册IMGvar WaitImg=document.createElement("img");WaitImg.setAttribute("src",SCRIPTS_URL+"scripts/img/upload/waiter123.gif");WaitImg.setAttribute("id","WaitImager");//注册Ifrmaevar WaitIfrmae=document.createElement("iframe");WaitIfrmae.setAttribute("id","WaitIfrmaer");WaitIfrmae.setAttribute("frameborder","0");//向页面内容document.body.appendChild(WaitIfrmae);document.body.appendChild(WaitDiv);WaitDiv.appendChild(WaitImg);//设置样式$("html").css({"height":"100%"});$("body").css({"height":"100%"});$("div#waiter").css({"position":"absolute","z-index":"10000","top":"0","left":"0","width":"100%","height":document.documentElement.scrollHeight,"background":"#fff"});$("div#waiter").fadeTo("fast",0.8);$("img#WaitImager").css({"position":"absolute","top":document.documentElement.scrollTop+400,"left":document.documentElement.scrollWidth/2});$("iframe#WaitIfrmaer").css({"position":"absolute","z-index":"9990","top":"0","left":"0","width":"99%","height":document.documentElement.scrollHeight-30});//测试用解除绑定事件$($("img#WaitImager").bind("click",removeAll))}function removeAll(){$("#WaitIfrmaer").eq(0).remove();$("#waiter").eq(0).remove();$("#WaitImager").eq(0).remove()}
