Asp.net mvc 需要使用ASP.NET MVC2调试基于XHR的Ajax图像上载的帮助吗

我正在尝试使用从中找到的脚本

我的控制器如下

using System;
using System.IO;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Hosting;
using System.Web.Mvc;
using MHNHub.Areas.ViewModels;
using MHNHub.Models;
using MHNHub.ViewModels;

namespace MHNHub.Areas.Admin.Controllers
{
    [Authorize(Roles = "Administrator")]
    public class ImageController : Controller
    {

        private MHNHubEntities _entities = new MHNHubEntities();

        //
        // GET: /Image/
        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult ImageUploader()
        {
            var viewModel = new ImageViewModel()
            {
                Image = new Image()
            };

            return PartialView(viewModel);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ImageUploader(Image image)
        {
            try
            {
                _entities.Images.AddObject(image);
                _entities.SaveChanges();

                return RedirectToAction("Index", "Product");
            }
            catch (Exception ex)
            {
                var viewModel = new ImageViewModel()
                                {
                                    Image = image,
                                    HasError = true,
                                    ErrorMessage = ex.Message
                                };
                return PartialView(viewModel);

            }
        }

        private string _uploadsFolder = HostingEnvironment.MapPath("~/App_Data/Files");

        public Guid Upload(HttpPostedFileBase fileBase)
        {
            var identifier = Guid.NewGuid();
            fileBase.SaveAs(GetDiskLocation(identifier));
            return identifier;
        }

        private string GetDiskLocation(Guid identifier)
        {
            return Path.Combine(_uploadsFolder, identifier.ToString());
        }

    }

}

我有这样的局部观点

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MHNHub.ViewModels.ImageViewModel>" %>

<script type="text/javascript">
    $(function () {
        $("#imagedialog").dialog({
            bgiframe: true,
            height: 170,
            width: 430,
            modal: true,
            autoOpen: false,
            resizable: true
        })
    });

    $(document).ready(function createUploader() {
        var uploader = new qq.FileUploader({
            element: document.getElementById('fileuploader'),
            action: '/Image/Upload/',
            name: 'name'
        });

    });

</script>    

<div id="imagedialog" title="Upload Image">

                <div id="fileuploader">

                </div>
                <h6>Drag and drop files supported in Firefox and Google Chrome with javascript enabled.</h6> 
                    <noscript>
                         <form action="/image/upload" enctype="multipart/form-data" method="post">
                            Select a file: <input type="file" name="photo" id="photo" />   

                            <input type="submit" value="Upload" name="submit"/>
                        </form>
                    </noscript>


</div>

<div class="editor-field">
    <img src="<%: Model.Image.FileName %>" />
    <%: Html.TextBoxFor(model => model.Image.FileName) %>
    <%: Html.ValidationMessageFor(model => model.Image.FileName)%>
    <a href="#" onclick="jQuery('#imagedialog').dialog('open'); return false">Upload Image</a>
</div>

我在母版页上正确链接了fileuploader.js和fileuploader.css，并且上传程序显示正确，它甚至调用了我的操作，但是HttpPostedFileBase为null，上传操作抛出异常。对我应该做什么有什么见解吗

编辑

---

所以我发现使用firebug发送XmlHttpRequest。如何在上载操作中处理此问题？

在控制器操作中获取空参数的原因是该插件未向服务器发送多部分/表单数据请求。相反，它发送应用程序/八位字节流内容类型请求头，并将文件内容直接写入请求流，在包含文件名的URL中附加参数？qqfile。因此，如果您想在控制器上检索此信息，则需要直接读取流：

[HttpPost]
public ActionResult Upload(string qqfile)
{
    using (var reader = new BinaryReader(Request.InputStream))
    {
        // This will contain the uploaded file data and the qqfile the name
        byte[] file = reader.ReadBytes((int)Request.InputStream.Length);
    }
    return View();
}

如果选择多个文件，插件只需向服务器发送多个请求即可

此外，如果要处理大于int.MaxValue的文件，则必须从请求流中分块读取，并直接写入输出流，而不是将整个文件加载到内存缓冲区：

using (var outputStream = File.Create(qqfile))
{
    const int chunkSize = 2 * 1024; // 2KB
    byte[] buffer = new byte[chunkSize];
    int bytesRead;
    while ((bytesRead = Request.InputStream.Read(buffer, 0, buffer.Length)) > 0)
    {
        outputStream.Write(buffer, 0, bytesRead);
    }
}

---

备注：从document.ready中删除createUploader函数名。它应该是一个匿名函数。您甚至可以将其与$function{…}合并；您已经需要设置模式对话框了。

那么如何保存文件（始终是图像），例如，保存到app_数据/上传或类似的内容？这就是我的第二个代码片段所做的。您只需在文件中指定路径即可。Create.谢谢Darin，它现在正在保存文件。还有一件事-如何维护内容类型？像上载.jpg一样，另存为.jpg等，而不仅仅是文件.qqfile包含文件名。您可以使用扩展来猜测内容类型，但这不是100%可靠的。没有100%可靠的方法知道内容类型。我最终就是这么做的。我使用Path.GetExtension从qqfile中获取了文件扩展名，并将其附加到保存的文件名中。到目前为止，我测试过的所有东西都很好，除了插件说文件传输“失败”，而实际上没有。您不会碰巧知道应该返回什么操作来显示成功消息，是吗？他提供的例子与此无关。