首頁 > 開發者 > 網站開發

ajaxfileupload.js實現無重新整理非同步上傳圖片Demo

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：客戶   匯入   oid   tostring   nbsp   請求方式   sts   成功   exist   

第一步：匯入ajaxfileupload.js檔案

第二步：建立一個aspx，在body裡面建立一個檔案域，一個上傳按鈕

<body>    <input type="file" name="file" id="fileId" />    <input type="button"  value="上傳" id="uploadBtn" />    <br />    <img src="" id="img" /></body>

第三步：用戶端代碼

<script>        $(function () {            $("#uploadBtn").click(function () {                $.ajaxFileUpload({                    url: ‘FileUpload.ashx‘,//執行上傳處理的檔案地址                    fileElementId: ‘fileId‘,//file控制項的id屬性的值，要求這個控制項要有name屬性，用於在伺服器端接收                                      success: function (data) {//成功的回呼函數，內部處理會加上html標籤,                        $("#img").attr("src", $(data).text());                    }                });            });        });        //$.ajaxFileUpload({        //    url: ‘PhotoGet.ashx‘,//執行上傳處理的檔案地址        //    secureuri: false,//是否加密，一般是false，預設值為false        //    fileElementId: ‘UploadImg‘,//file控制項的id屬性的值，要求這個控制項要有name屬性，用於在伺服器端接收        //    data: {//額外傳遞的資料，使用json，此時必須設定type為post        //        type: 1        //    },        //    type: ‘post‘,//請求方式，如果傳遞額外資料，必須是post        //    success: function (data) {//成功的回呼函數，內部處理會加上html標籤，data是DOM對象，通過$(data)轉成html標籤        //        $("#img1").attr("src", $(data).text());        //    }        //});    </script>

第四步：服務端代碼

 public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            HttpPostedFile file = context.Request.Files["file"];            if (file!=null)            {                string fileName = Path.GetFileName(file.FileName);                string fileExten = Path.GetExtension(fileName);                if (fileExten == ".jpg")                {                    string dir = "/ImageUpload/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";                    if (!Directory.Exists(context.Request.MapPath(dir)))                    {                        Directory.CreateDirectory(context.Request.MapPath(dir));                    }                    string fullFilePath = dir + Guid.NewGuid().ToString() + "_" + fileName;                    file.SaveAs(context.Request.MapPath(fullFilePath));                    context.Response.Write(fullFilePath);                }            }                   }

 

ajaxfileupload.js實現無重新整理非同步上傳圖片Demo

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More