首页 新闻 搜索 专区 学院

MVC表单异步提交图片失败!求解!

0
悬赏园豆:5 [已解决问题] 解决于 2014-05-14 13:48
<!DOCTYPE html>

<html>
<head>
    <title>UpImg</title>
    <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
</head>
<body>
   <div>
        @{using (Ajax.BeginForm("UpFile", "Test", new { }, new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "div1" }, new { enctype = "multipart/form-data" }))
          {
            <input type="file" name="upfile" id="upfile" /><br />
            <input type="submit" value="上传吧" />
          }  }
        <hr />
        <div id="div1">
        </div>
    </div>
</body>
</html>

Controller

        [HttpPost]
        public ActionResult UpFile(HttpPostedFileBase upImg)//这里的upImg始终是null
        {
            HttpPostedFileBase file = Request.Files[0];//在这里获取到的Request中的Files的数量始终是零,始终获取不到文件
            if (file.ContentLength > 0)
            {
                    string finallPath = DateTime.Now.Tostring("yyyy-MM=dd")+".jpg";
                    file.SaveAs(finallPath);
            }
       return Content("no"); }

问题如上述代码注释。求解!

TC小班的主页 TC小班 | 初学一级 | 园豆:192
提问于:2014-05-13 23:57
< >
分享
最佳答案
1

MVC自带的异步表单本来就不能提交图片。

可以考虑使用插件:AjaxForm,参考http://www.cnblogs.com/china-li/archive/2012/12/12/2800144.html

收获园豆:5
FlyDragon | 菜鸟二级 |园豆:396 | 2014-05-14 09:53
其他回答(4)
0

异步表单提交,不能提交文件.异步上传文件.和异步表单技术实现是不一样的

吴瑞祥 | 园豆:28851 (高人七级) | 2014-05-14 09:58
0

除了iframe或者纯html表单模式,无法异步提交表单上传文件。如果非要这样,可以参考我的javascript代码

 

 

window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        if (form.dataset.ajax) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (form.dataset.ajaxUpdate) {
                        var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                        if (updateTarget) {
                            updateTarget.innerHTML = xhr.responseText;
                        } 
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);

 

 

wongdavid | 园豆:394 (菜鸟二级) | 2014-05-14 10:12
0
把图片放到一个Form中 用Ajax提交,需要引用文js件 http://malsup.github.io/jquery.form.js
<form id="summaryJpgForm" enctype="multipart/form-data" method="POST">
  <input type="file" id="summaryJpgFile" name="summaryJpgFile" /> <input type="submit" id="btnsummaryJpg" value="上传文件" /> </form>
var uploadWordOptions = {
        url: '/Conrtroller/UpFile,
        success: function (data) {
                     alert("上传成功!");
        }
    };


后端代码和你的一样,方法上不要用加[HttpPost]

AntonWong | 园豆:202 (菜鸟二级) | 2014-05-14 13:46
$('#btnsummaryJpg').click(function () {
        $("#summaryJpgForm").ajaxSubmit(uploadWordOptions);

        return false;
    });

 

少了一步

支持(0) 反对(0) AntonWong | 园豆:202 (菜鸟二级) | 2014-05-14 13:49
0

HttpPostedFileBase upImg  这个变量名要和前台<input type="file"/> 这个控件的name一样。

puphjl | 园豆:202 (菜鸟二级) | 2015-05-20 15:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册