如何让jQuery的Uploadify插件与ASP.NETMVC一起工作?

noj0wjuj  于 2022-12-03  发布在  jQuery
关注(0)|答案(6)|浏览(115)

我正在尝试让jQuery插件Uploadify与ASP .NETMVC一起工作。
我已经得到了显示良好的插件与以下JavaScript片段:

<script type="text/javascript">
    $(document).ready(function() {
        $('#fileUpload').fileUpload({
            'uploader': '/Content/Flash/uploader.swf',
            'script': '/Placement/Upload',
            'folder': '/uploads',
            'multi': 'true',
            'buttonText': 'Browse',
            'displayData': 'speed',
            'simUploadLimit': 2,
            'cancelImg': '/Content/Images/cancel.png'
        });
    });
</script>

如果您注意到,“script”属性被设置为my /Placement/Upload,这是我的放置控制器和上载操作。
主要的问题是,我很难触发这个动作来接收文件。我在这个动作上设置了一个断点,当我选择一个文件上传时,它没有被执行。
我尝试过更改基于this article的方法签名:

public string Upload(HttpPostedFileBase FileData)
{
    /*
    *
    * Do something with the FileData
    *
    */
    return "Upload OK!";
}

但还是打不开。
有人能帮助我正确地编写并获得Upload控制器操作的签名吗?这样我就可以自己处理文件数据了。我只需要一些帮助来获得方法操作的触发。

c90pui9n

c90pui9n1#

public string Upload(HttpPostedFileBase FileData) {}

是正确的-uploadify上传的文件将绑定到FileData。不需要进入Request.Files来检索文件-这使得模拟和测试更加困难。
如果你的操作根本没有触发(例如,尝试调试并查看是否命中了方法中的断点),那么你的问题很可能是“script”值--你是在虚拟目录下运行吗?如果是,你需要将目录名放在前面。Uploadify使用的是绝对路径。
即“脚本:'/虚拟目录/放置/上载'
现在Uploadify正在发送到http://localhost/Placement/Upload
也可以尝试使用路由调试器(http://haacked.com/archive/2008/03/13/url-routing-debugger.aspx)来检查您的路由被Map到哪里。

lf5gs5x2

lf5gs5x22#

问题可能是您需要指定要上传到的动作设置为“发布...”,它将无法将该动作作为“获取”动作使用。
所以,这个:

public string Upload(HttpPostedFileBase FileData)
{
   //do something
}

应该是这样的:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase FileData)
{
   //do something
}

另外,请注意,如果您在网站的“登录”部分使用此功能,您应该在此处查看uploadify和身份验证的已知错误:Link
另外,顺便说一句,MVC中有几种处理文件上传的方法(按照Rory菲茨帕特里克的建议使用Request.Files,以及将HttpPostedFileBase文件作为操作定义中的参数传递)。

vqlkdk9b

vqlkdk9b3#

这根本不是我实现文件上传的方法,我有一个没有参数的action方法,它使用当前的Request对象来访问发布的文件集合。
我的实现中的一些示例代码:

[AcceptVerbs(HttpVerbs.Post)]
public ContentResult Upload() {
    if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) {
        HttpPostedFileBase postedFile = Request.Files[0];
        // Do something with it
    }
}

当然,编写测试就变成了一个PITA,为了让它工作,你必须模拟几个对象,例如:

var mockHttpContext = mocks.StrictMock<HttpContextBase>();
var mockRequest = mocks.StrictMock<HttpRequestBase>();
var postedFile = mocks.StrictMock<HttpPostedFileBase>();

var postedFileKeyCollection = mocks.StrictMock<HttpFileCollectionBase>();

mockHttpContext.Expect(x => x.Request).Return(mockRequest).Repeat.Any();
mockRequest.Expect(x => x.Files).Return(postedFileKeyCollection).Repeat.Any();

postedFileKeyCollection.Expect(x => x[0]).Return(postedFile).Repeat.Any();
postedFileKeyCollection.Expect(x => x.Count).Return(1);

postedFile.Expect(f => f.ContentLength).Return(1024);
postedFile.Expect(f => f.InputStream).Return(null);

在发布的文件中创建一个接口并只模仿它会更容易,使用IoC将一个具体的实现注入到控制器中。
我认为这主要是基于这篇文章:Implementing HTTP File Upload with ASP.NET MVC including Tests and Mocks

bprjcwpo

bprjcwpo4#

我的完整解决方案可能会解决你的问题。希望它有帮助。
http://zootfroot.blogspot.com/2010/12/mvc-file-upload-using-uploadify-with.html

a11xaf1n

a11xaf1n5#

阅读文档时,它似乎正在发送文件数组。您是否尝试过:

public string Upload( HttpPostedFileBase[] fileData )

默认的模型绑定器也可能无法与HttpPostedFileBase一起工作,您需要使用Rory的机制或编写自己的模型绑定器。

gzjq41n4

gzjq41n46#

下面是我的简单Razor视图(布局母版包含Javascript包)

@{
ViewBag.Title = "Upload Email CSV";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.js")"></script>

<script type="text/javascript">

$(function () {
    var uploadUrl = "@Url.Content("~/UploadFile/UploadEmailCSV/")";
    var uploadSWF = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")";
    var uploadifyButtonImage = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")";

    $('#file_upload').uploadify({
        'fileSizeLimit': '0',
        'buttonImage': '/uploadify/browse-btn.png',
        'swf': uploadSWF,
        'uploader': uploadUrl,
        'onUploadSuccess': function(file, data, response) {
            alert('The file was saved to: ' + data);
        }
    });
});
</script>
<h2>Upload a comma separated list of email addresses</h2>
@using (Html.BeginForm("UploadEmailCSV", "UploadFile", FormMethod.Post, new { @class = "form-horizontal", @enctype = "multipart/form-data", @id = "frmUploadFiles" }))
{
    <input type="file" name="file_upload" id="file_upload" />
}

下面是控制器方法

public ActionResult UploadEmailCSV()
    {
        var uploadedFile = Request.Files["Filedata"];

        if (uploadedFile != null && uploadedFile.ContentLength > 0)
        {
            var filePath = Path.Combine(Server.MapPath("~/UploadedFiles"), string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName)));
            uploadedFile.SaveAs(filePath);
            return Content(string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName)));

        }
        return Content("Error Uploading file!");
    }

就是这样!

相关问题