IT轮子系列（四）——使用Jquery+formdata对象 上传 文件

前言

在MVC 中文件的上传，一般都采用控件：

<h2>IT轮子四——文件上传</h2>
<div>
    <input type="file" />
</div>

第一种方式：使用form表单上传

前台代码：

<div>
    <form action="/FileUpload/UploadFile" method="post" enctype="multipart/form-data">
        <input type="file" name="file" /><br /><br />
        <input type="submit" value="提交" />
    </form>
</div>

在前台界面，我们需要注意，当采用form提交数据的时候，我们页面中的控件必须要有name属性。否则，后台接收不到数据。

后台代码：

[HttpPost]
        public ActionResult UploadFile() {
            try
            {
                var files = Request.Files;
                foreach (string item in files)
                {
                    //可上传多个文件
                    var file = files[item];
                    var fileName = file.FileName;
                    var filePath = Server.MapPath(string.Format("~/{0}", "File"));
                    //判断路径是否存在
                    if (!Directory.Exists(filePath))
                    {
                        //创建路径
                        Directory.CreateDirectory(filePath);
                    }
                    //保存文件
                    file.SaveAs(Path.Combine(filePath, fileName));
                }
            }
            catch (Exception ex)
            {                
                throw;
            }
            return View("Index");
        }

好拉，这样就文件就保存到指定的目录拉。

第二种方式：使用Jquery+formdata对象

formdata对象上传文件，其实也上form表单的另一种方式。只是通过juqery进行提交而不是form默认的action。

<h2 style="color:burlywood">第二种方式：使用Jquery+formdata对象</h2>
<div>
    <input type="file" name="file" /><br />
    <input type="button" value="提交" id="btnUpload" />
</div>
<script>
    $(document).ready(function () {
        //给按钮绑定点击事件
        $("#btnUpload").on("click", function () {
            //声明formdata对象
            var formData = new FormData();
            //获取上传文件
            var files = $("input[name='file']").get(0).files[0];
            formData.append("myFile", files);
            //这里也可以添加其他参数
            formData.append("Name", "Peter");
            //通过ajax上传
            $.ajax({
                url: '/Home/Upload/',
                data: formData,
                type: 'post',
                contentType: false,//这里必须为false
                processData: false,//这里必须为false
                success: function (obj) {
                    if (obj.success == 1) {
                        //根据返回json的对象做出提示
                        alert("上传成功");
                    }
                }
            });
        })
    })
</script>

       public ActionResult Upload()
        {
            //这里的files 和form 都可按第一种上传方式处理、解析上传的文件和数据
            var files = Request.Files;
            var form = Request.Form;
            //do something here

            //return the josn object
            var obj = new
            {
                success = 1
            };
            return Json(obj);
        }

后记

从10月初，确切的说9月29号起，也写了7、8篇技术类文章。有的文章也有几百的阅读量，可评论留言的人却少之又少，点赞、推荐就更没有。如果这些文章确实帮到了你，对你的工作有那么一点点的用，希望路过的兄弟姐妹们可以有赞的点个赞，有推荐的来个推荐，有转载的来个转载,为我这个博客园增添点人气。

谢谢拉

谨以这篇博客鞭策自己。