jquery - 如何在 ASP.NET MVC 中执行 Ajax/JQuery 上传图像？

Question

我有一个用 ASP.NET MVC 编写的网站。我有一个页面，用户可以在其中创建一篇小文章。对于本文，他们可以选择一个图像。我有一个页面，他们可以在其中上传图像，并在创建文章页面上简单地列出它们。但许多人提示他们已经写了整篇文章，然后才意识到他们没有上传他们需要的图像。我想要的是用户能够从创建文章页面上传图像，然后重新加载可能的图像下拉列表以供选择。

我正在考虑在页面上制作一个单独的多部分表单，并让用户在那里选择一个文件(基本上使用我现有的上传功能)。但是我该如何异步提交呢？异步重新渲染我的图像列表怎么样？

如何使用 jquery/ajax 上传此图像，然后重新填充我的下拉列表？

/干杯

Answer 1

我用过这个jQuery pluging几次。
我将上传按钮放在 jQuery UI modal dialog 中它使用 PopupImageUploader 元素。

<div id="PopupImageUploader" title="Upload Image">
    <div id="uploaderFile"></div>
</div>

我的 JavaScript 在元素 upladerFile

上构建 uploader

function CreateImageUploader() {
    var uploader = new qq.FileUploader({
        element: $('#uploaderFile')[0],
        template: '<div class="qq-uploader">' +
                              '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                              '<div class="qq-upload-button ui-button ui-widget ui-corner-all ui-button-text-only ui-state-default">Seleziona il Listino Excel</div>' +
                              '<ul class="qq-upload-list"></ul>' +
                              '</div>',
        hoverClass: 'ui-state-hover',
        focusClass: 'ui-state-focus',
        action: 'Home/UploadImage',
        allowedExtensions: ['jpg', 'gif'],
        params: { },
        onSubmit: function(file, ext) {

            },
        onComplete: function(id, fileName, responseJSON) {
            $("#PopupImageUploader").dialog('close');
            }
        }
    });
}

您可以使用 onComplete 事件检查上传结果，并最终更新您的下拉列表。您的 UploadImage 操作可以接收 params: { } 属性中指定的额外参数。这是我的 Controller :

    [HttpPost()]
    public System.String UploadImage(string id)
    {

        bool IsIE = false;
        string sFileName = "";
        var TempFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "_TEMP");

        if ((Request.Files == null) || (Request.Files.Count == 0))
        {
            if (string.IsNullOrEmpty(Request.Params["qqfile"]))
            {
                return ("{success:false, error:'request file is empty'}");
            }
            else
            {
                sFileName = Request.Params["qqfile"].ToString();
            }
        }
        else
        {
            sFileName = Request.Files[0].FileName;
            IsIE = true;
        }

        if (string.IsNullOrEmpty(sFileName))
        {
            return ("{success:false, error:'request file is empty'}");
        }

        string DocumentName = id + Path.GetExtension(sFileName);

        if (IsIE)
        {
            try
            {
                Request.Files[0].SaveAs(Path.Combine(TempFolder, DocumentName));
            }
            catch (Exception ex)
            {
                return ("{success:false, error:'" + ex.Message + "'}");
            }
        }
        else
        {
            try
            {
                if ((Request.InputStream != null) && (Request.InputStream.CanRead) && (Request.InputStream.Length > 0))
                {
                    using (FileStream fileStream = new FileStream(Path.Combine(TempFolder, DocumentName), FileMode.Create))
                    {
                        byte[] FileBytes = new byte[Convert.ToInt32(Request.InputStream.Length) + 1];
                        Int32 bytesRead = 0;
                        bytesRead = Request.InputStream.Read(FileBytes, 0, FileBytes.Length);
                        fileStream.Write(FileBytes, 0, bytesRead);
                        fileStream.Flush();
                        fileStream.Close();
                    }
                }
            }
            catch (Exception ex)
            {
                return ("{success:false, error:'" + ex.Message + "'}");
            }
        }

        var newFileName = "new assigned filename";

        return ("{success:true, newfilename: '" + newFileName + "'}");

    }

IE 有不同的行为，因此我有两个不同的过程来读取文件。