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>