ajaxform无刷新上传

16 篇文章 0 订阅
13 篇文章 0 订阅
/*******************************************************************************
 * 
 * ajax提交form
 * 
 ******************************************************************************/
/*   调用示例,在看不懂也没办法了
 $(function(){
	 var tempHTML = '<input type="text" id="aaa" value/><input  name="file1" type="file" />'+
	 "<input type=\"button\" οnclick=\"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" class="fileimg" 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;

// 动态创建的formid
var yuanpengform = "";
//上传成功后返回的图片ID 隐藏表单的ID
var 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()}
	//注册DIV
	var WaitDiv=document.createElement("div");
	WaitDiv.setAttribute("id","waiter");
	//注册IMG
	var WaitImg=document.createElement("img");
	WaitImg.setAttribute("src",SCRIPTS_URL+"scripts/img/upload/waiter123.gif");
	WaitImg.setAttribute("id","WaitImager");
	//注册Ifrmae
	var 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()
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值