c# ASP.NET MVC easyui-filebox 圖片上傳和顯示

原文：https://www.cnblogs.com/huatao/p/4727398.html

　　　https://www.cnblogs.com/weiweithe/p/4363458.html

表單multipart/form-data與x-www-form-urlencoded區別

               multipart/form-data：既可以上傳文件等二進制數據，也可以上傳表單鍵值對，只是最后會轉化為一條信息；

               x-www-form-urlencoded：只能上傳鍵值對，並且鍵值對都是間隔分開的。

一、前端代碼

        @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new {enctype = "multipart/form-data"}))
        {
            <div>文件上傳：<input type="file" name="myFile"/></div>
            <input type="submit" value="提交"/>
        }
　　　　 //類似的使用easyui
　　　　 @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new {enctype = "multipart/form-data"}))
        {
  　　　　　　    <div class="div-group">
                <input id="txtSignPhoto" class="easyui-filebox" name="SignPhoto" style="width: 90%" 
                       data-options="label:'簽字文件:',required:true,buttonText:'選擇文件',prompt:'僅支持圖片、xls、doc和docx格式',onChange:function(){checkFile(2)}"/>
          　　   </div>
　　　　　}
        //編寫JS方法checkFile()驗證文件格式
function checkFile(a) //檢查文件
{
    var fileTypes = ['.jpg', '.jpeg', '.bmp', '.png', '.gif', 'psd', '.rar', '.zip', '.doc', '.docx', 'wps', '.xls', '.xlsx', '.txt', '.pdf'];
    var filePath;
    if (a === 1)
        filePath = window.$('#txtSignPhoto').textbox('getValue');
    if (filePath !== '') {
        var flag = false;
        var fileType = filePath.substring(filePath.lastIndexOf("."));
        if (fileTypes.length > 0) {
            for (var i = 0; i < fileTypes.length; i++) {
                if (fileTypes[i] === fileType) {
                    flag = true;
                    break;
                }
            }
        }
        if (!flag) {
            alert('不接受' + fileType + '文件類型上傳');
            if (a === 1)
                window.$('#UploadFile').textbox('setValue', '');          
            return;
        }
    }
}

以及表單的2種寫法：

<form method="post" action="~/Areas/seal/Views/register/Index.cshtml" enctype="multipart/form-data">

    <input type="text" name="desc">

    <input type="file" name="pic">

</form>

    二、后台代碼

        /// <summary>
        /// 上傳文件
        /// </summary>
        /// <returns>上傳文件結果信息</returns>
        [HttpPost]
        public ActionResult UploadFile()
        {
            HttpPostedFileBase file = Request.Files["myFile"];
　　　　　　　//接收文本


            if (file != null)
            {
                try
                {
                    var filename = Path.Combine(Request.MapPath("~/Upload/Image/"), file.FileName);
                    file.SaveAs(filename);
                    return Content("上傳成功");
                }
                catch (Exception ex)
                {
                    return Content(string.Format("上傳文件出現異常：{0}", ex.Message));
                }
                
            }
            else
            {
                return Content("沒有文件需要上傳！");
            }
        }

 三、根據地址顯示圖片

方法1：

前台：

<img src="/controller/action"/>
或者<img alt="Chart" id="change" src="@Url.Action("action", "Register", new { ViewBag.id ,v = DateTime.Now.ToString("yyyyMMddhhmmss")})" />

 

后台：

public ActionResult Action()
        {
            string path = "讀取數據庫里面的圖片路徑";
            byte[] img = System.IO.File.ReadAllBytes(path);//將圖片讀入字節數組
            return new FileContentResult(img, "image/jpeg");//返回圖片
        }

 方法2：

 <img alt="你好" id="change1" style='width:100px; height:80px' />

 //js賦值，文件存放在更目錄下
window.$("#change1").attr("src", "/Upload/Image" + pathname);
//設置為非必需填寫
$('#change1).filebox({ required: false });

//鼠標懸浮時放大圖片並水平居中
<style type="text/css">
    img:hover {
        transform: scale(22, 15);
        vertical-align: middle;
        display: inline;
        position: absolute;
        top: 50%;
        left: 50%;
    }
</style>