????? 今天在這里介紹一下ajax上傳文件。其實也不算是真的使用xmlhttprequest上傳，只是使用了iframe實現了無刷新上傳而已，最多也只算是仿ajax上傳文件。然而網上關于使用xmlhttprequest上傳文件的卻是少之又少。即使有，對其他瀏覽器的兼容也是不敢恭維。到是有專門的公司提供這樣的解決方案,如：ajaxuploader.com提供各式各樣的ajax上傳方式。呵呵，只是它不是開源而且是針對.net平臺的。廢話少說了，我們今天就使用jquery+iframe來實現無刷新上傳。以下是解決方案圖：?

?

??????????????????????????????? （圖1）

下面是上傳完的界面：

接下來看一下主要代碼：

1、在default.aspx頁面，先引用jquery及其插件:

?<script type="text/javascript" src="scripts/jquery.js"></script>
?<script type="text/javascript" src="scripts/interface.js"></script>

?

2、接著我們來看一下default.aspx頁面的jquery代碼,注解已經都在里面的，相信只要會jquery都能看得懂，我就不再啰嗦了。?

Code
<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("<img?src='"+loadingUrl+"'?align='absmiddle'?/>?上傳中");
????????????return?el;
????????};
????????
????????//重新上傳方法????
????????var?uploadinit?=?function(){
????????????$("#uploading").fadeOut("fast",function(){
?????????????????$("#ifUpload").fadeIn("fast");
????????????});
???????????????????
????????};
????????
????????//上傳時程序發生錯誤時，給提示，并返回上傳狀態
????????var?uploaderror?=?function(){
????????????alert("程序異常，上傳未成功。");
????????????uploadinit();
????????};
????????
????????//上傳成功后的處理
????????var?uploadsuccess?=?function(newpath){
????????????$("#txtContent").append("<img?src=\""+newpath+"\"?οnlοad=\"if(this.width>300){this.width=300;}\"?/>");
??????????????var?el?=?$("#uploading");
????????????el.html("上傳成功,<a?href=\"javascript:void(0);\"?οnclick=\"uploadinit();\">[重新上傳]</a>.");
????????};
????????
????????
????????//創建一個上傳控件
????????var?uploadcreate?=?function(el){
????????????var?strContent?=?"<div?class='uploadcontrol'><iframe?src=\"upload.aspx\"?id=\"ifUpload\"?frameborder=\"no\"?scrolling=\"no\"?style=\"width:400px;?height:28px;\"></iframe>";
????????????strContent?+=?"<div?class=\"uploading\"?id=\"uploading\"?style=\"display:none;\"?></div>";
????????????strContent?+=?"<div?class=\"image\"?id=\"panelViewPic\"?style=\"display:none;\"></div></div>";
????????????el.append(strContent);
????????};
?????????
????</script>

?

3、再來看一下upload.aspx頁面都有哪些東西。

?

Code
????<script?type="text/javascript">
????????
????????var?uploadSelect?=?function(el){
????????????el.fadeOut("show");????????
????????????parent.uploading(document.getElementById("file1").value);
????????????$("#frmUpload").submit();
????????};
?????????
????</script>

當然在這個頁面你也得做第一步該做的事，誰叫我們都用上了jquery呢，呵呵。

?

4、upload.aspx頁面元素都有哪些呢？

Code
????<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代碼，都是些上傳文件的代碼，我只貼出部分的主要代碼。

Code
????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方法為：

Code
????protected?void?WriteJs(string?jsContent)
????{????????
????????this.Page.RegisterStartupScript("writejs","<script?type='text/javascript'>"+?jsContent+"</script>");
????}

好了！至此，整個例子就都完成了。

可能邏輯上講得不是很好，請大家多多諒解啊！

?

轉載于:https://www.cnblogs.com/JackLee_2008/archive/2008/12/15/1355001.html

總結

以上是生活随笔為你收集整理的.net ajax式上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。