如何在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有不同的行为,所以我有两个不同的过程来读取文件.