上传文件

一：前端页面

<form method="post" action="/File/UploadFile" enctype="multipart/form-data">
　　 <input type="file" name="file" multiple="multiple"/>
    <button type="submit">上传文件</button>
</form>

　ps.如果要上传文件，需要将form表单的enctype属性设置为multipart/form-data。

　　enctype：编码方式（encode type） 该属性用在将表单中的数据提交到服务器之前对数据进行某种方式的编码。默认是application/x-www-form-urlencoded。

　　enctype属性有三种值：

　　1. application/x-www-form-urlencoded    在发送前编码所有字符（默认）

　　2. multipart/form-data                              不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

　　3. text/plain                                              空格转换为 "+" 加号，但不对特殊字符编码。

二：后台代码

        [HttpPost]
        public ActionResult UploadFile()
        {
            //首先先获取本次请求中文件的数量
            int filesCount = Request.Files.Count;
            if (filesCount > 0)
            {
                for (int i = 0; i < filesCount; i++)
                {
                    HttpPostedFileBase uploadFile = Request.Files[i];
                    //获取上传文件的名字
                    var fileName = uploadFile.FileName;
                    string filePath = Server.MapPath("/UploadFiles/" + fileName);
                    //保存到指定目录中
                    uploadFile.SaveAs(filePath);
                }
            }
            return View();
        }

 这里是以mvc框架为例子。当用户点击提交文件button时，对File控制器中的UploadFile方法进行请求。

 

三：简单的无刷新的用户logo保存

 前端

 <form method="post" enctype="multipart/form-data" id="formUpload">
            <img src="" id="user-logo"/>
            <input type="file" name="file" id="input-file"/>
            <p><button type="button">保存图片</button></p>
 </form>

　　

js

 $("#input-file").on("change", function () {
        var uploadFormData = new FormData($('#formUpload')[0]);//序列化表单，
        console.log(uploadFormData.values);
       
        $.ajax({
            type: "POST",
            url: "/File/UploadImg",
            data: uploadFormData,
            processData: false,
            contentType: false,
            success: function (data) {
                alert(data);
                $("#user-logo").attr("src", data);
            }

        });
    });

　

后台

 [HttpPost]
        public JsonResult UploadImg()
        {
            string result="";
            int filesCount = Request.Files.Count;
            if (filesCount > 0)
            {
                for (int i = 0; i < filesCount; i++)
                {
                    HttpPostedFileBase uploadFile = Request.Files[i];
                    //获取上传文件的名字
                    var fileName = uploadFile.FileName;
                    string filePath = Server.MapPath("/UploadFiles/" + fileName);
                    result = "/UploadFiles/" + fileName;
                    //保存到指定目录中
                    uploadFile.SaveAs(filePath);
                }
            }
            return Json(result);
        }