MVC3 + Ajax 圖片上傳總結

來源:互聯網
上載者:User

方法一:uploadify外掛程式

1.Ajax 往後台Post 的資料有兩種,一種是文本類型,一種是大資料檔案圖片等。而Ajax不能直接傳大資料檔案,只能藉助外掛程式實現該功能。

@{    ViewBag.Title = "Index";}<h2>Index</h2>   <script src="http://www.cnblogs.com/Scripts/swfobject.js" type="text/javascript"></script>    <script src="http://www.cnblogs.com/Scripts/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>    <link href="http://www.cnblogs.com/Content/uploadify.css" rel="stylesheet" type="text/css" />    <style type="text/css">        .textstyle1        {            color: Red;            font-weight: bold;        }        .textstyle2        {            color: Green;            font-weight: bold;        }    </style>    <script type="text/javascript">        $(function () {            //上傳            $('#fileInput1').uploadify({                'uploader': '/Content/uploadify.swf',                'script': '/Upload/AddPic',                'folder': '/Upload',                'cancelImg': '/Content/cancel.png',                'fileExt': '*.xls',                'fileDesc': '*.xls',                'sizeLimit': 1024 * 1024 * 4, //4M                'multi': false,                'onComplete': fun            });        });        function fun(event, queueID, fileObj, response, data) {            if (response != "") {                showInfo("成功上傳" + response, true); //showInfo方法設定上傳結果                 }            else {                showInfo("檔案上傳出錯!", false);            }        }        //顯示提示資訊,textstyle2為綠色,即正確資訊;textstyl1為紅色,即錯誤資訊        function showInfo(msg, type) {            var msgClass = type == true ? "textstyle2" : "textstyle1";            $("#result").removeClass();            $("#result").addClass(msgClass);            $("#result").html(msg);        }        //如果點擊‘匯入檔案’時選擇檔案為空白,則提示        function checkImport() {            if ($.trim($('#fileInput1Queue').html()) == "") {                alert('請先選擇要匯入的檔案!');                return false;            }            return true;        }     </script><div>    <input type="text" id="test" />    <p><input id="fileInput1" name="fileInput1" type="file"/></p>    <p style="margin-top:5px;font-size:14px;font-weight:bold;">    <a href="javascript:if(checkImport()){$('#fileInput1').uploadifySettings('scriptData',{'name':$('#test').val()});$('#fileInput1').uploadifyUpload();}">匯入檔案</a></p>    <p style="margin-top:5px;font-size:14px;font-weight:bold;"><span id="result"></span></p></div> 

  後台代碼:

namespace qdxy.Controllers{    public class UploadController : Controller    {        //        // GET: /Upload/        public ActionResult Index()        {            return View();        }        [HttpPost]        public JsonResult AddPic2(HttpPostedFileBase context)        {            int s = Request.ContentLength;            //string fileName = Path.GetFileName(upImg.FileName);            //string filePhysicalPath = Server.MapPath("~/Upload/"+fileName);            //string name = "", message = "";            //byte[] bytes  = new byte[]{};            //try            //{            //    upImg.SaveAs(filePhysicalPath);            //    name = Path.GetFileName(fileName);            //    bytes = Encoding.Unicode.GetBytes("圖片添加成功");            //    for (int i = 0; i < bytes.Length; i+=2)            //    {            //        message += "\\u" + bytes[i+1].ToString("x").PadLeft(2,'0')+bytes[i].ToString("x").PadRight(2,'0');            //    }            //}            //catch (Exception ex)            //{            //    message = ex.Message;            //}            return Json(new            {                //picpath = "/Upload/" + fileName,                //message = message            });        }        [HttpPost]        public JsonResult AddPic(HttpPostedFileBase FileData, string folder, string name)        {            string title = string.Empty;            string message = string.Empty;            //將傳過來的圖片映射到物理硬碟的路徑上            string storeFilePath = Server.MapPath("~/Upload/"+FileData.FileName);            try            {                //儲存圖片的方法                FileData.SaveAs(storeFilePath);                title = Path.GetFileName(folder);                byte[] bytes = Encoding.Unicode.GetBytes("圖片上傳成功");                //將圖片轉換成Unicode編碼方便傳輸                /*                 * Unicode和漢字編碼小知識 將漢字進行UNICODE編碼,                 * 如:“王”編碼後就成了“\u738b”,UNICODE字元以\u開始,後面有4個數字或者字母                 * ,所有字元都是16進位的數字,每兩位表示的256以內的一個數字。                 * 而一個漢字是由兩個字元組成,於是就很容易理解了,                 * “738b”是兩個字元,分別是“73”“8b”。                 * 但是在將 UNICODE字元編碼的內容轉換為漢字的時候,                 * 字元是從後面向前處理的,所以,需要把字元按照順序“8b”“73”                 * 進行組合得到漢字                 * */                for (int i = 0; i < bytes.Length; i+=2)                {                    message += "\\u" + bytes[i + 1].ToString("x").PadLeft(2, '0') + bytes[i].ToString("x").PadRight(2,'0');                }            }            catch (Exception ex)            {                message = ex.Message;            }            return Json(new {                                    title = title,                message = message            });        }    }}

  原本是想用Json來返回上傳的結果的,但似乎用戶端的uploadify外掛程式的方法不支援json格式的資料,有待進一步研究。

方法二:利用 JQueryForm外掛程式 詳見:http://www.cnblogs.com/kfx2007/archive/2012/08/27/2658325.html

  這種方法是利用Form提交表單來把大資料傳到背景。

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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