Как выполнить загрузку изображения Ajax / JQuery в ASP.NET MVC?

Question

У меня есть сайт, написанный на ASP.NET MVC.У меня есть страница, где пользователь может создать небольшую статью.К этой статье они могут выбрать изображение.У меня есть страница, где они могут загрузить свои изображения, а на странице создания статьи просто перечислить их.Но многие люди жалуются, что написали целую статью, прежде чем осознали, что не загрузили нужное изображение.Я хочу, чтобы пользователь мог загрузить изображение со страницы создания статьи, а затем перезагрузить выпадающий список возможных изображений для выбора.

Я думаю о создании отдельной многочастной формы на странице,и позволяя пользователю выбрать файл там (в основном использую мои существующие функции загрузки).Но как я могу представить его асинхронно?А как насчет повторного рендеринга моего списка изображений в асинхронном режиме?

Как загрузить это изображение с помощью jquery / ajax, а затем снова заполнить раскрывающийся список?

/ cheers

Answer 1

Я использовал это jQuery pluging несколько раз.
Я поместил кнопку загрузки в модальное диалоговое окно jQuery UI , в котором используется элемент PopupImageUploader .

<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 имеет другое поведение, поэтому у меня есть две разные процедуры для чтения файла.

Answer 2

Вы можете использовать плагин JQuery Form. Вы можете найти код и примеры здесь:

http://jquery.malsup.com/form/#file-upload

Надеюсь, это поможет.

Answer 3

   <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
 $("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

                    },
                    error: function (error) {
                        alert("errror");
                    }
                });

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }