原文：/huatao/p/4727398.html
/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 = bine(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>
