如何让 swfupload 与 Asp.Net MVC 2 一起使用

发布于 2024-09-16 14:38:52 字数 3425 浏览 3 评论 0原文

我正在尝试使用 swfUpload jquery/flash 插件进行上传，并且遵循 Steven Sanderson 的方法（http://blog.stevensanderson.com/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/< /a>）。但我无法让它发挥作用。它在我从他的网站下载的示例应用程序中运行良好。为了让它工作，我尝试直接在我的应用程序中复制他的页面和所有内容，但它仍然不起作用。

这是页面：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>

    <title>File upload</title>
        <link rel="Stylesheet" href="../../Content/Site.css" />
<%--        <script src="../../Scripts/jquery-1.2.6.min.js"></script>--%>
        <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../../Scripts/swfupload.js"></script>

        <script type="text/javascript" src="../../Scripts/jquery-asyncUpload-0.1.js"></script>
    </head>
    <body>
        <div id="MainContents">
            <form enctype="multipart/form-data" method="post">
                <h1>Your profile</h1>
                <p>(In a real app, other form controls would appear here)</p>
                <p>
                    Upload your photo: <input type="file" id="photo" name="photo" />
                </p>

                <input type="submit" value="Save my profile" />
            </form>
        </div>        
        <script type="text/javascript">
            $(function () {
                $("#photo").makeAsyncUploader({
                    upload_url: "/Customers/AsyncUpload/",
                    flash_url: '../../Scripts/swfupload.swf',
                    button_image_url: '/Content/blankButton.png',
                    disableDuringUpload: 'INPUT[type="submit"]'
                });
            });        
        </script>  
        <div id="result"></div>
    </body>
</html>

这是操作方法：

    public Guid AsyncUpload()
    {

        return _fileStore.SaveUploadedFile(Request.Files[0]);
    }

这是在 CustomersController 控制器中，我在控制器的开头有这个：

private IFileStore _fileStore = new DiskFileStore();

正如他在示例中所做的那样。当然，我还拥有 IFileStore 接口和 DiskFileStore 类。

我在 head 标签中包含了对 js 文件和 css 的所有引用：（

<head>

<title>File upload</title>
    <link rel="Stylesheet" href="../../Content/Site.css" />
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/swfupload.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery-asyncUpload-0.1.js"></script>
</head>

尽管我使用了最新的 jQuery，而不是他在示例中使用的 1.2.6）。我至少知道脚本被触发，因为在 FireBug 中我可以看到输入动态地更改为 flash 对象，正如它应该的那样。

问题是，AsyncUpload() 甚至从未被调用。我在那里设置了一个从未到达的断点。我遇到了不同的错误。我第一次尝试时，在脚本的警报框中收到了 302 错误。（当时我在同一页面上有其他 jQuery 脚本，所以我只使用这些脚本从一个更干净的页面开始）。但现在我没有收到任何错误，我可以选择图像和所有内容，但它只是停在文本显示“正在上传...”的阶段，但我没有看到进度条或任何东西，而且它永远不会结束。

有什么想法我做错了吗？

原文

I'm trying to use the swfUpload jquery/flash plugin for uploads, and I'm following the approach by Steven Sanderson (http://blog.stevensanderson.com/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/ ). But I can't get it to work. It works fine in the sample application I downloaded from his site. Just to try to get it to work I have tried to copy his page and everything directly in my application, but it still doesn't work.

Here's the page:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>

    <title>File upload</title>
        <link rel="Stylesheet" href="../../Content/Site.css" />
<%--        <script src="../../Scripts/jquery-1.2.6.min.js"></script>--%>
        <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../../Scripts/swfupload.js"></script>

        <script type="text/javascript" src="../../Scripts/jquery-asyncUpload-0.1.js"></script>
    </head>
    <body>
        <div id="MainContents">
            <form enctype="multipart/form-data" method="post">
                <h1>Your profile</h1>
                <p>(In a real app, other form controls would appear here)</p>
                <p>
                    Upload your photo: <input type="file" id="photo" name="photo" />
                </p>

                <input type="submit" value="Save my profile" />
            </form>
        </div>        
        <script type="text/javascript">
            $(function () {
                $("#photo").makeAsyncUploader({
                    upload_url: "/Customers/AsyncUpload/",
                    flash_url: '../../Scripts/swfupload.swf',
                    button_image_url: '/Content/blankButton.png',
                    disableDuringUpload: 'INPUT[type="submit"]'
                });
            });        
        </script>  
        <div id="result"></div>
    </body>
</html>

And here's the action method:

    public Guid AsyncUpload()
    {

        return _fileStore.SaveUploadedFile(Request.Files[0]);
    }

This is in a CustomersController controller, and I have this at the beginning of the controller:

private IFileStore _fileStore = new DiskFileStore();

Just as he does in his sample. Of course I also have the IFileStore interface and DiskFileStore class in place.

I have all the references to the js files and css in the head tag:

<head>

<title>File upload</title>
    <link rel="Stylesheet" href="../../Content/Site.css" />
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/swfupload.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery-asyncUpload-0.1.js"></script>
</head>

(Although I have used the latest jQuery I have, rather than 1.2.6 which he had in his sample). I know at least that the scripts are triggered, because in FireBug I can see that the input is dynamically changed to a flash object, as it's supposed to be.

The thing is, AsyncUpload() is never even called. I set a breakpoint there which is never reached. And I'm getting different errors. The first time I tried it I got a 302 error in an alert box from the script. (At that time I had other jQuery scripts on the same page, so I started over with a cleaner page using just these scripts). But now I'm not getting any error, I can choose image and all, but then it just stops at the stage where the text says "Uploading...", but I don't see the progress bar or anything, and it never finishes.

Any ideas what I'm doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

氛圍 2024-09-23 14:38:52

使用下面的 CSS 来修复 Firefox 问题

DIV.ProgressBar { 
    width: 100px; padding: 0; border: 1px solid black; margin-right: 1em;
    height:.75em; margin-left:1em; display:-moz-inline-stack;
    display:inline-block; zoom:1; *display:inline; 
}
DIV.ProgressBar DIV { 
    background-color: Green; font-size: 1pt; height:100%; float:left; 
}
SPAN.asyncUploader OBJECT { 
    position: relative; top: 5px; left: 10px; 
}

use below CSS for fixing Firefox issue

DIV.ProgressBar { 
    width: 100px; padding: 0; border: 1px solid black; margin-right: 1em;
    height:.75em; margin-left:1em; display:-moz-inline-stack;
    display:inline-block; zoom:1; *display:inline; 
}
DIV.ProgressBar DIV { 
    background-color: Green; font-size: 1pt; height:100%; float:left; 
}
SPAN.asyncUploader OBJECT { 
    position: relative; top: 5px; left: 10px; 
}

回复收藏 0 原文