简单实现Ajax异步上传文件

最新推荐文章于 2021-12-27 15:04:04 发布

原创最新推荐文章于 2021-12-27 15:04:04 发布 · 881 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #mvc #asp.net #ajax #异步

本文介绍如何使用FormData对象和Ajax实现文件的异步上传功能，包括前端表单设计、FormData对象构建及Ajax提交过程。

认识FormData对象

XMLHttpRequest Level 2添加了一个新的接口`FormData`.利用`FormData对象`,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的`send()`方法来异步的提交这个"表单".比起普通的ajax,使用`FormData`的最大优点就是我们可以异步上传一个二进制文件。若要更详细的了解FormData对象，请查看使用FormData对象。具体代码，标红处需要特别注意：

<form id="myForm" method="post" class="form-horizontal" name="myForm" enctype="multipart/form-data" action="">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="col-md-2 control-label">类型</label>
                            <div class="col-md-10">
                                <div class="mt-radio-inline">
                                    <label class="mt-radio">
                                        <input type="radio" name="Type" id="news" value="行业新闻" checked> 行业新闻
                                        <span></span>
                                    </label>
                                    <label class="mt-radio">
                                        <input type="radio" name="Type" id="trends" value="协会动态"> 协会动态
                                        <span></span>
                                    </label>
                                    <label class="mt-radio">
                                        <input type="radio" name="Type" id="laws" value="法律法规"> 法律法规
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">标题</label>
                            <div class="col-md-10">
                                <div class="input-icon">
                                    <i class="fa fa-bell-o"></i>
                                    <input type="text" name="Title" id="Title" class="form-control" placeholder="新闻标题">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">图片:</label>
                            <div class="col-md-10">
                                <input type="file" id="myfile" name="ImageUrl" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">内容</label>
                            <div class="col-md-10">
                                <input type="hidden" id="Content" name="Content" value="" />
                                @*<textarea name="Content" id="Content" class="form-control" rows="10"></textarea>*@
                                <script type="text/plain" id="myEditor" style="height:250px">
                                </script>
                            </div>
                        </div>
                    </div>
                </form>
		<button type="button" class="btn btn-default" οnclick="closeModal()" data-dismiss="modal">关闭</button>
                <button οnclick="submitData()" class="btn btn-primary">提交</button>

使用FormData对象创建一个表单

        function submitData() {
            var title = $('#Title').val();
            var type = $("input[name='Type']:checked").val();
            var content = $('#Content').val();
            content = ue.getContent();
            var file = document.getElementById("myfile").files[0];
 
            var formData = new FormData();
            formData.append("Title", title);
            formData.append("Type", type);
            formData.append("Content", encodeURI(content));
            formData.append("ImageUrl", file);

使用Ajax提交FormData对象

             $.ajax({
                url: "/Isoc/NewslawsManage/Index",
                type: "post",
                data: formData,
                contentType: false,//必须为false才会自动加上正确的Content-Type
                processData: false,//必须为false，才会重置jquery对formdata的默认处理
                success: function (data) {
                    var result = data.split(':');
                    if (result[0] == "yes") {
                        alert(result[1]);
                    } else {
                        alert(result[1]);
                    }
                },
                error: function (data) {
                    console.info(data);
                }
            })
        }
后台接受代码

 public ActionResult Index(News news, HttpPostedFileBase ImageUrl)
        {
            string path = string.Empty;
            if (ImageHelper.UpImages(ImageUrl, "NewsImage", out path))
            {
                using (var db = new IsocContext())
                {
                    news.ImageUrl = path;
                    news.CreateTime = DateTime.Now;
                    db.News.Add(news);
                    return db.SaveChanges() > 0 ? Content("no:新闻发布成功") : Content("no:新闻发布失败");
                }
            }
            else
            {
                return Content("no:新闻发布失败");
            }
        }
至此Ajax上传文件就完成了，如有不对的地方还望指出，共同进步。