今天在这里介绍一下ajax上传文件。其实也不算是真的使用xmlhttprequest上传,只是使用了iframe实现了无刷新上传而已,最多也只算是仿ajax上传文件。然而网上关于使用xmlhttprequest上传文件的却是少之又少。即使有,对其他浏览器的兼容也是不敢恭维。到是有专门的公司提供这样的解决方案,如:ajaxuploader.com提供各式各样的ajax上传方式。呵呵,只是它不是开源而且是针对.net平台的。废话少说了,我们今天就使用jquery+iframe来实现无刷新上传。以下是解决方案图:
(图1)
下面是上传完的界面:
接下来看一下主要代码:
1、在default.aspx页面,先引用jquery及其插件:
2、接着我们来看一下default.aspx页面的jquery代码,注解已经都在里面的,相信只要会jquery都能看得懂,我就不再啰嗦了。
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">
$(document).ready(function(){
uploadcreate($("#uploadbox"));
});
var hideDiv = function(idName){
$("#"+idName).fadeOut("fast");
};
//载入中的GIF动画
var loadingUrl = "images/ajax-loader.gif";
//选择文件后的事件,iframe里面调用的
var uploading = function(imgsrc){
var el = $("#uploading");
$("#ifUpload").fadeOut("fast");
el.fadeIn("fast");
el.html("
![](https://www.cnblogs.com/Images/dot.gif)
return el;
};
//重新上传方法
var uploadinit = function(){
$("#uploading").fadeOut("fast",function(){
$("#ifUpload").fadeIn("fast");
});
};
//上传时程序发生错误时,给提示,并返回上传状态
var uploaderror = function(){
alert("程序异常,上传未成功。");
uploadinit();
};
//上传成功后的处理
var uploadsuccess = function(newpath){
$("#txtContent").append("
var el = $("#uploading");
el.html("上传成功,"javascript:void(0);" οnclick="uploadinit();">[重新上传].");
};
//创建一个上传控件
var uploadcreate = function(el){
var strContent = "
strContent += "
strContent += "
el.append(strContent);
};
</script>
3、再来看一下upload.aspx页面都有哪些东西。
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">
var uploadSelect = function(el){
el.fadeOut("show");
parent.uploading(document.getElementById("file1").value);
$("#frmUpload").submit();
};
</script>
当然在这个页面你也得做第一步该做的事,谁叫我们都用上了jquery呢,呵呵。
4、upload.aspx页面元素都有哪些呢?
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<form runat="server" id="frmUpload" method="post" enctype="multipart/form-data">
<input type="file" runat="server" id="file1" size="40" onchange="uploadSelect($(this));" />
form>
记住一定要给form的method、enctype属性分别赋上"post"、"multipart/form-data",这样才能保证upload.aspx.cs里面可以获取到上传的文件信息。
5、最后看一下upload.aspx.cs代码,都是些上传文件的代码,我只贴出部分的主要代码。
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
string picPath = "";
string picServer = "upload";
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
picPath = Server.MapPath("~/upload");
doUpload();
}
}
protected void doUpload()
{
try
{
HttpPostedFile file = file1.PostedFile;
string strNewPath = GetSaveFilePath() + GetExtension(file.FileName);
file.SaveAs(picPath+strNewPath);
string urlPath = picServer + strNewPath;
urlPath = urlPath.Replace("\", "/");
WriteJs("parent.uploadsuccess('" + urlPath + "'); ");
}
catch (Exception ex)
{
WriteJs("parent.uploaderror();");
}
}
WriteJs方法为:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
protected void WriteJs(string jsContent)
{
this.Page.RegisterStartupScript("writejs",""+ jsContent+"");
}
好了!至此,整个例子就都完成了。
可能逻辑上讲得不是很好,请大家多多谅解啊!