此技术的原理就是用FORM提交到IFRAME里面,由IFRAME 响应,响应的页面负责保存图片,然后返回到另外一个接受路径的页面,由接受页面调用第一个页面的函数,显示图片。由于是有IFRAME页面响应处理,所以页面不存在刷新的过程,而且使用的控件都是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">
<head>
<title></title>
<script src="../JavaScripts/Jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
//上传完成之后处理返回值
function SingleImgUploaded(type, fileName) {
if (fileName == "") {
alert("文件名不存在");
return;
}
if (type == "1") {
//上传用户头像
}
//alert(fileName);
$("#testimgbox").attr("src", "/upload/1/" + fileName);
}
function imgsubmit() {
//alert("1");
//$("frmUserImgIFR").attr("src", "/upload/saveimg.aspx?ReturnURL=/upload/recimg.html");
$("#form1").attr("action", "/upload/saveimg.aspx?ReturnURL=/upload/recimg.html");
$("#form1").submit();
}</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td > <br><br>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form id="form1" name="form1" method="post" target="frmUserImgIFR" enctype="multipart/form-data">
<input type="file" name="Filedata" onchange="javascript:imgsubmit();" size="100" >
<input name="uploadType" type="hidden" id="hhidUserImgUploadType" value="1" />
<!--<input type="submit" name="Submit" value="上传">-->
<br>
<img id="testimgbox" src="" />
<div style="display: none;">
<iframe id="frmUserImgIFR" name="frmUserImgIFR" src=""></iframe>
</div>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../JavaScripts/Jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
//上传完成之后处理返回值
function SingleImgUploaded(type, fileName) {
if (fileName == "") {
alert("文件名不存在");
return;
}
if (type == "1") {
//上传用户头像
}
//alert(fileName);
$("#testimgbox").attr("src", "/upload/1/" + fileName);
}
function imgsubmit() {
//alert("1");
//$("frmUserImgIFR").attr("src", "/upload/saveimg.aspx?ReturnURL=/upload/recimg.html");
$("#form1").attr("action", "/upload/saveimg.aspx?ReturnURL=/upload/recimg.html");
$("#form1").submit();
}</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td > <br><br>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form id="form1" name="form1" method="post" target="frmUserImgIFR" enctype="multipart/form-data">
<input type="file" name="Filedata" onchange="javascript:imgsubmit();" size="100" >
<input name="uploadType" type="hidden" id="hhidUserImgUploadType" value="1" />
<!--<input type="submit" name="Submit" value="上传">-->
<br>
<img id="testimgbox" src="" />
<div style="display: none;">
<iframe id="frmUserImgIFR" name="frmUserImgIFR" src=""></iframe>
</div>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
第二部,保存的页面
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
public partial class upload_saveimg : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//string ss = Request["ttype"].ToString();
string returnURL = Request["ReturnURL"];
returnURL = (returnURL == null ? "" : returnURL);
string uploadType = Request["uploadType"];
uploadType = (uploadType == null ? "" : uploadType);
HttpPostedFile file = Request.Files["Filedata"];
string uploadPath = @"E:\vs\WebSite\upload\1\";
if (file != null)
{
string fileExt = file.FileName.Substring(file.FileName.LastIndexOf('.') + 1).ToLower();
fileExt = ("," + fileExt + ",");
if ((",jpg,jpeg,gif,png,").IndexOf(fileExt) < 0)
{
Response.Redirect(returnURL + "?FileName=&uploadType=" + uploadType, true);
return;
}
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
Random r = new Random();
string NewFileName = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(DateTime.Now.ToString("yyyyMMddHHmmSS") + r.Next(10000, 99999).ToString(), "MD5");
NewFileName += "." + file.FileName.Split('.')[1];
file.SaveAs(uploadPath + NewFileName);
//下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
//Response.Write(NewFileName);
Response.Redirect(returnURL + "?FileName=" + NewFileName + "&uploadType=" + uploadType, true);
return;
}
else
{
Response.Redirect(returnURL + "?FileName=&uploadType=" + uploadType, true);
return;
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
public partial class upload_saveimg : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//string ss = Request["ttype"].ToString();
string returnURL = Request["ReturnURL"];
returnURL = (returnURL == null ? "" : returnURL);
string uploadType = Request["uploadType"];
uploadType = (uploadType == null ? "" : uploadType);
HttpPostedFile file = Request.Files["Filedata"];
string uploadPath = @"E:\vs\WebSite\upload\1\";
if (file != null)
{
string fileExt = file.FileName.Substring(file.FileName.LastIndexOf('.') + 1).ToLower();
fileExt = ("," + fileExt + ",");
if ((",jpg,jpeg,gif,png,").IndexOf(fileExt) < 0)
{
Response.Redirect(returnURL + "?FileName=&uploadType=" + uploadType, true);
return;
}
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
Random r = new Random();
string NewFileName = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(DateTime.Now.ToString("yyyyMMddHHmmSS") + r.Next(10000, 99999).ToString(), "MD5");
NewFileName += "." + file.FileName.Split('.')[1];
file.SaveAs(uploadPath + NewFileName);
//下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
//Response.Write(NewFileName);
Response.Redirect(returnURL + "?FileName=" + NewFileName + "&uploadType=" + uploadType, true);
return;
}
else
{
Response.Redirect(returnURL + "?FileName=&uploadType=" + uploadType, true);
return;
}
}
}
第三步,显示返回的图片:
<!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">
<head>
<title></title>
<script type="text/javascript" language="javascript">
var fileName = queryStr("FileName");
var uploadType = queryStr("uploadType");
try {
window.parent.SingleImgUploaded(uploadType, fileName);
}
catch (e) {
alert(e);
}
// finally {
// window.parent.SingleImgUploaded(uploadType, fileName);
// }
//处理url中的字符串,取出某个键p的值
function queryStr(p) {
var url = window.location.search;
var paras = url.substring(url.indexOf("?") + 1, url.length).split("&");
return splitChain(paras, p);
}
//处理a=1&b=2&c=3这样的字符串,分割并取出键p的值
function splitChain(paras, p) {
var paraObj = {}
for (i = 0; j = paras[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
if (p != null) {
var returnValue = paraObj[p.toLowerCase()];
if (typeof (returnValue) == "undefined") {
return "";
} else {
return returnValue;
}
} else {
return paraObj;
}
}
</script>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript">
var fileName = queryStr("FileName");
var uploadType = queryStr("uploadType");
try {
window.parent.SingleImgUploaded(uploadType, fileName);
}
catch (e) {
alert(e);
}
// finally {
// window.parent.SingleImgUploaded(uploadType, fileName);
// }
//处理url中的字符串,取出某个键p的值
function queryStr(p) {
var url = window.location.search;
var paras = url.substring(url.indexOf("?") + 1, url.length).split("&");
return splitChain(paras, p);
}
//处理a=1&b=2&c=3这样的字符串,分割并取出键p的值
function splitChain(paras, p) {
var paraObj = {}
for (i = 0; j = paras[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
if (p != null) {
var returnValue = paraObj[p.toLowerCase()];
if (typeof (returnValue) == "undefined") {
return "";
} else {
return returnValue;
}
} else {
return paraObj;
}
}
</script>
</head>
<body>
</body>
</html>