快速學習AJAX之六 Ajax實現無重新整理上傳頭像

哈哈，繼續了，這節課程不多說了，大家常常說到得無重新整理上傳。

上節課我們做的那個 簡單的註冊，真的是及其簡單的，還有很多功能我沒有調整，但是請大家記住

我一定會慢慢的去完善 它的功能的，只不過暫時沒有 他們和 AJAX 聯絡不太大，我就沒有實現。

好了，我們開始我們的無重新整理上傳吧，順便產生一個微縮圖片，哈哈。

準備：一張美女頭像圖片

然後，一雙手。哈哈。
首先，記得建立一個 Upload檔案夾啊。

最新的項目結構

好了，首先我們改造我們的  那個上傳的  <input> 

        <tr><td>頭像：</td><td>        <form id="imageform"  method="post" action="Upload.ashx" enctype="multipart/form-data">        <input type="file" name="file" />        <input type="submit" value="上傳" onclick="return checkfile(imageform.file.value);" />        </form>        </td><td></td></tr>這個就是我們改好的了，因為上傳  需要的提交方式是 POST，所以我們只能，臨時搭建一個POST了 ，呵呵

<form id="imageform" method="post" action="Upload.ashx" enctype="multipart/form-data"> 主要  要注意這一句啊。

enctype 注意  一定要是  我寫的這種類型哦。  提交頁面我們是  Upload.ashx  這個頁面，所以你需要新建立一個介面接收我們的資料哦。

呵呵，上面的那個    onclick="getsex(this.value);"   其實就是一個非空驗證

function checkfile(value) {    if (value == '') {        alert('請選擇檔案！');        imageform.file.focus();        return false;    } } 

好了，我們下面實現一個最簡陋的版本，無重新整理上傳  頭像，呵呵

<tr><td>頭像：</td><td>        <form id="imageform"  method="post" action="Upload.ashx" enctype="multipart/form-data" target="submitIform">        <input type="file" name="file" />        <input type="submit" value="上傳" onclick="return checkfile(imageform.file.value);" />        </form>        </td><td></td></tr>        <tr><td colspan=3 ><img style="width:150px; height:150px;" src="###" id="image"/></td></tr>

修改一下我們的前台現實  頭像的代碼。

注意一個特別的地方，這也算是無重新整理上傳的一個小技巧吧  ，就是這個  target="submitIform"

這個地方一定要提交到，

<iframe name="submitIform" style="display:none;"></iframe>

當然，你有其他的辦法更好，我這裡主要是，一會後台調用JS事件，好實現，調用父表單的事件。提交這個隱藏的 IFROM中，也算是一種特別的方式吧。

前台新增加即時顯示圖片的方法

    if (fileName == '') {        alert('沒有上傳檔案');        return false;    }document.getElementById('image').src = 'Upload/'+fileName;}

好了，基本的工作，我們已經做完了，下面，就是，我們的  Upload.ashx的代碼了

public void ProcessRequest(HttpContext context)    {        context.Response.ContentType = "text/html";        context.Response.ContentType = "utf-8";        HttpPostedFile file = context.Request.Files["file"];        string error = null;        if (file == null || file.ContentLength <= 0) {            error = "請選擇需要上傳的圖片";        }        else        {            string newFileName = Guid.NewGuid().ToString();            var extension = Path.GetExtension(file.FileName).ToUpper();            newFileName += extension;            string filePath = string.Empty;            if (SaveAsTemp(newFileName, file, context))            {                context.Response.Write("<script>parent.uploadOver('" + newFileName + "')</script>");

            }        }    }context.Response.Write("<script>parent.uploadOver('" + newFileName + "')</script>"); 
我想這句你就知道，我上面的那個 為什麼要用IF嵌套了，呵呵。

SaveAsTemp

這個方法是我們的 Save 圖片的方法

public bool SaveAsTemp(string fileName, HttpPostedFile file,HttpContext context)    {        HttpServerUtility Server = context.Server;        try        {            string filePath = Server.MapPath("~/Upload/" + fileName);            file.SaveAs(filePath);            return true;        }        catch        {            fileName = null;            return false;        }    }

很簡單吧。好了，看效果吧。

其實我們還有很多沒有做，比如，上傳圖片的大小啊，上傳圖片的格式啊，上傳檔案的進度條

我想這些效果做好了會更加優秀的，下節課，我們嘗試著完善上面的例子。

 

無重新整理上傳  NET版本1.0完成，哈哈。