jquery图片上传新思路

本文主要针对于上传多张图片时，要显示进度条但是表单窗口不够显示的情形。其解决方案如下：

1、在表单窗口添加能够显示上传成功图片的input 和上传图片按钮

2、点击图片上传按钮弹出div窗口；

3、div窗口iframe一个图片上传的页面，此页面采用html5对多张图片上传预览、显示上传进度等效果。

4、在图片接受后台代码中将上传成功的图片文件名或者图片服务器URL地址串写入到session;

5、在表单窗口中添加div窗口关闭方法，在此方法中实现通过ajax调用GetSerrion.ashx，

6、将返回的结果显示在input中。

表单页面html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Jquery教程演示:JavaScript弹出窗口DIV层效果代码--代码吾爱 </title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="../js/JScript.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
</head>
<body>
	<center>
		<div id="button"><input type="submit" value="点击这里查看效果" /></div>
		
	</center>
	<div id="popupContact">

		<a id="popupContactClose">x</a>
		<h1>图片上传窗口</h1>
			<iframe src="../MainPage/login.aspx"   height="90%" width="100%" ></iframe>
		</div>
	<div id="backgroundPopup"></div>
</body>
</html>

　表单js代码：

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!					
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
		$.ajax({
		url:"GetSession.ashx?key=tupian",
		async:false,
		cache:false,
		success:function(data){
		alert(data);
		},
		error:function(data){
		alert(data);
		}
		});
	    
		
		
		
	
		//alert("关闭了");
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
				
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

　接受图片后台代码：

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Web.SessionState;
public class Handler : IHttpHandler,IRequiresSessionState {
    
    
    public void ProcessRequest (HttpContext context)
    {



        context.Session["tupian"] = "1111";
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
    
    
    

}

通过ajax读取图片信息：

<%@ WebHandler Language="C#" Class="GetSession" %>

using System;
using System.Web;
using System.Web.SessionState;
public class GetSession : IHttpHandler,IRequiresSessionState {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string value = "";
        //context.Response.Write("Hello World");
        if(context.Request.QueryString["key"]!=null)
        {
            string key=context.Request.QueryString["key"].ToString();
           value= context.Session[key].ToString();
        }
        context.Response.Write(value);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

posted @ 2015-01-20 16:19  Asilan  阅读(410)  评论(0)    收藏  举报