0

我正在尝试使用 ASP.NET MVC 部分视图上传文件。

**Partial view:**

@using (Html.BeginForm("FileUpload", "Item", FormMethod.Post, new { enctype = "multipart/form-data", id="frmUp" }))
{
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
}

主要形式：

<div id="uploadDiv" class="divSettings" align="left">        
    @Html.Partial("FileUpload")
</div>

在我的主要形式中，我有以下代码。

$("#frmUp").submit(function () {
    var serviceURL = '/Item/FileUpload/';
    var id = $("#selID").val();
    alert(id);
    $.ajax({
        type: "POST",
        url: serviceURL,
        data: { id: id },
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {        
    }

    function errorFunc() {
    }
});

控制器：

[HttpPost]
public ActionResult FileUpload(HttpPostedFileBase file, string id, FormCollection formCollection)
{
    //here id parameter is null and i get the file parameter values
    return PartialView();
}

在我的控制器中，id 参数始终为空。上面的代码有什么问题？

4

3 回答 3

0

您还没有停止表单的正常操作，因此您将照常发布它并发送 AJAX 请求。

这是为您提供null值的表单的常规发布id，因为该表单没有任何具有该名称的字段。

使用preventDefault函数开头的方法来停止发布表单：

$("#frmUp").submit(function (e) {
  e.preventDefault();
  ...

这将使 AJAX 请求到达服务器，而不是定期发布表单，但是该file参数将始终为空，因为您无法使用 AJAX 发布文件。

于 2013-06-20T06:50:29.307 回答
0

如果你想实现类似 AJAX 的文件发布，你必须使用 3rd 方 AJAX 插件、Flash 上传器或其他任何可以在 Web 浏览器下访问文件系统的东西。

但是，如果您不想混合技术，您可以随时使用隐藏 iframe 方法。事实上，我一直在我最近工作的一个项目中使用这种方法，并且效果很好！

以下是一些有用的资源：http:
//viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/
Jquery File Upload Hidden IFrame

于 2013-06-20T07:06:16.280 回答
0

方法 - 1

Ajax FileUpload插件上传文件，并将响应传递给回调，仅此而已。

  • 它不依赖于特定的 HTML，只需给它一个<input type="file">
  • 它不需要您的服务器以任何特定方式响应
  • 使用多少文件或它们在页面上的位置都没有关系

-- 少用 --

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

——或多于——

$('input[type="file"]').ajaxfileupload({
    'action': '/upload.php',
    'params': {
    'extra': 'info'
    },
    'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
    },
    'onStart': function() {
    if(weWantedTo) return false; // cancels upload
    },
    'onCancel': function() {
    console.log('no file selected');
    }
});

方法-2

@model FileUpload
@using (Ajax.BeginForm("YourActionMethod", "ControllerName", new AjaxOptions
    {
        HttpMethod = "POST"
    }, new { enctype = "multipart/form-data", id = "frmUp" }))
{
    <input type="file" accept="image/*" name="FileInfo" value="File to Upload" />
    <input type="submit" name="Submit" value="Submit" />
}


[HttpPost]
public ActionResult YourActionMethod(UploadFileModel fileModel)
{
    return View();
}

public class UploadFileModel
{
    public HttpPostedFileBase FileInfo { get; set; }
}

如果你注意上面的代码，我正在使用Ajax.BeginForm. 除此之外，我建议使用 View-Models 将数据传回给您，Action Method而不是 FormCollection。

在此处输入图像描述

为什么查看模型而不是 FormCollection？

我有四个问题。

问题 - 1

如果FormCollection正在使用...强制类型转换Primitive类型值是不必要的，因为在获取特定索引的条目时System.Collections.Specialized.NameValueCollection，返回的值是字符串类型。这种情况不会出现在 Strongly Typed 的情况下View-Models。

问题 - 2

当您提交表单并转到PostAction Method，并且 View-Model as Parameter 存在于该Action方法中时，您可以将 Posted Values 发送回您的 View。否则，再次编写代码以发送回TempData/ViewData/ViewBag

问题 - 3

在准备单元测试用例时，您将再次面临Issue-1中提到的相同问题。当代码以下列方式编写时，这是一个非常大的问题。由于请求在单元测试用例中不可用。

public ActionResult MyActionResult()
{
    String value = Request.Form["Key"];
    return View();
}

问题 - 4

我们有Data Annotations可以在View Modelor中实现的Custom Validations。

在此处输入图像描述

方法 - 3

上传 - 请在此处查看

注意- 为了检索控件中的 Posted 值，Post Action Method必须将控件保留在表单标签内。同样，您Hidden Fields也应该在 Form 标签内，以便在PostAction Method中获取它的值

于 2013-06-20T07:24:34.783 回答