主頁(yè) > 知識(shí)庫(kù) > Asp.net 2.0 無(wú)刷新圖片上傳 顯示縮略圖 具體實(shí)現(xiàn)

Asp.net 2.0 無(wú)刷新圖片上傳 顯示縮略圖 具體實(shí)現(xiàn)

熱門(mén)標(biāo)簽:鄭州400電話辦理 聯(lián)通 五常地圖標(biāo)注 電銷語(yǔ)音自動(dòng)機(jī)器人 地圖標(biāo)注和認(rèn)領(lǐng) 凱立德導(dǎo)航官網(wǎng)地圖標(biāo)注 萊蕪?fù)夂綦婁N機(jī)器人價(jià)格 智能電話營(yíng)銷外呼系統(tǒng) 長(zhǎng)春呼叫中心外呼系統(tǒng)哪家好 戶外地圖標(biāo)注軟件手機(jī)哪個(gè)好用

兼容性想還不錯(cuò):FF,CH,IE,獵豹,都是可以實(shí)現(xiàn)的。如果看到回顯。當(dāng)然就是成功了。

經(jīng)歷了好幾天的不停的鉆牛角尖,終于將這個(gè)二貨弄出來(lái)了。真是煞費(fèi)苦心啊。但是做出來(lái)的瞬間還是蠻開(kāi)心的。

第一步:我們需要加載幾個(gè)JS庫(kù)。
jquery庫(kù)。
jquery.form.js庫(kù)。

下載這兩個(gè)庫(kù),并引用到頁(yè)面中。

以下為頁(yè)面中 JS 代碼:

復(fù)制代碼 代碼如下:

  function upload() {
            var options = {
                type: "POST",                            //當(dāng)然這個(gè)是傳送方式
                url: '../Include/Files.ashx',        //一般處理程序的路徑
                success: function (msg) {        //返回的參數(shù)
                    $("#server_img").attr("src", msg);            //回顯圖片。
                }
            };
            // 將options傳給ajaxForm
            $('#aspnetForm').ajaxSubmit(options);
 }

第二步:一般處理程序內(nèi)的代碼
復(fù)制代碼 代碼如下:

 public void ProcessRequest(HttpContext context)
    {
        HttpFileCollection files = context.Request.Files;              // From中獲取文件對(duì)象
        if (files.Count > 0)
        {
             string path = "";                                                            //路徑字符串
            Random rnd = new Random();
            for (int i = 0; i files.Count; i++)
            {
                HttpPostedFile file = files[i];                                        //得到文件對(duì)象
                if (file.ContentLength > 0)
                {
                    string fileName = file.FileName;
                    string extension = Path.GetExtension(fileName);
                    int num = rnd.Next(5000, 10000);                            //文件名稱
                    path = "../../UserFiles/temp/" + num.ToString() + extension;
                    file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));        //保存文件。
                }
            }
            context.Response.Write(path);            //返回文件存儲(chǔ)后的路徑,用于回顯。
        }
    }

第三步:html或者aspx中的代碼。
    以下兩句代碼隨便插入html或者aspx中的任意位置。想來(lái)都是可以實(shí)現(xiàn)的。
復(fù)制代碼 代碼如下:

    img id="server_img" width="360px" style="border: 1px solid #ccc; padding: 2px;"   title="" alt="" />   //用于回顯圖片
    asp:FileUpload ID="Up_load" runat="server" onchange="upload()"  ontextchange="upload()"/>        //上傳圖片,自動(dòng)的,兩個(gè)事件是為了保證所有瀏覽器都兼容。

您可能感興趣的文章:
  • asp.net中MVC借助Iframe實(shí)現(xiàn)無(wú)刷新上傳文件實(shí)例
  • asp.net使用AJAX實(shí)現(xiàn)無(wú)刷新分頁(yè)
  • asp.net中Timer無(wú)刷新定時(shí)器的實(shí)現(xiàn)方法
  • asp.net中利用Jquery+Ajax+Json實(shí)現(xiàn)無(wú)刷新分頁(yè)的實(shí)例代碼
  • Asp.Net 無(wú)刷新文件上傳并顯示進(jìn)度條的實(shí)現(xiàn)方法及思路
  • asp.net+jquery ajax無(wú)刷新登錄的實(shí)現(xiàn)方法
  • asp.net jquery無(wú)刷新分頁(yè)插件(jquery.pagination.js)
  • asp.net Ajax之無(wú)刷新評(píng)論介紹
  • asp.net點(diǎn)擊 查看更多 實(shí)現(xiàn)無(wú)刷新加載的實(shí)現(xiàn)代碼
  • asp.net 簡(jiǎn)便無(wú)刷新文件上傳系統(tǒng)
  • asp.net ajax實(shí)現(xiàn)無(wú)刷新驗(yàn)證碼
  • asp.net 30分鐘掌握無(wú)刷新 Repeater
  • asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無(wú)刷新取后臺(tái)值的實(shí)現(xiàn)代碼
  • Asp.net實(shí)現(xiàn)無(wú)刷新調(diào)用后臺(tái)實(shí)體類數(shù)據(jù)并以Json格式返回

標(biāo)簽:宣城 福州 西寧 岳陽(yáng) 湖州 紅河 衢州 西藏

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Asp.net 2.0 無(wú)刷新圖片上傳 顯示縮略圖 具體實(shí)現(xiàn)》,本文關(guān)鍵詞  Asp.net,2.0,無(wú),刷新,圖片,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Asp.net 2.0 無(wú)刷新圖片上傳 顯示縮略圖 具體實(shí)現(xiàn)》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于Asp.net 2.0 無(wú)刷新圖片上傳 顯示縮略圖 具體實(shí)現(xiàn)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章