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

Question

我有一个用ASP.NET
MVC编写的网站。我有一个页面，用户可以在其中创建小文章。他们可以在本文中选择图片。我有一个页面，他们可以在其中上传图片，在“创建文章”页面上，只需列出它们即可。但是许多人抱怨他们在意识到自己没有上传所需图像之前写了整篇文章。我想要的是用户能够从“创建文章”页面上载图片，然后重新加载我的可能图片下拉菜单供您选择。

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

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

/干杯

Answer 1

我已经使用了这个jQuery插件几次。
我将上传按钮放在使用 PopupImageUploader* 元素的jQuery
UI模态对话框
中。 *

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

和我的javascript构建 upladerFile 元素上的上载 器

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: { }属性中指定的额外参数。这是我的控制器：

    [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具有不同的行为，因此我有两个不同的过程来读取文件。