Как мне обрабатывать несколько загрузок файлов в ASP.NET MVC 3?

У меня есть приложение ASP.NET MVC 3, которому требуется возможность загрузки нескольких файлов на сервер.

Вот функции, которые я хотел бы, чтобы он имел:

  • Сетка JQuery для отображения загруженных файлов
  • Модальное диалоговое окно загрузки JQuery (в котором есть элементы управления FileUpload)
  • Асинхронная загрузка (в окне загрузки будут показаны файлы в процессе загрузки)
  • Не хочу использовать флеш-плагины.

Приятно иметь:

  • Модальное окно загрузки файлов должно быть перезапускаемым.

Вопросы:

  • Есть ли у Jquery возможность асинхронно отправлять файлы в метод действия и сохранять их в папке и переменной сеанса?

  • Поскольку я использую этот компонент во многих представлениях, должен ли я следовать шаблону PRG или асинхронно загружать файл с помощью JQuery?


person thinkmmk    schedule 18.04.2012    source источник
comment
Я попытался уточнить ваш вопрос, большая часть того, что вы упомянули, сделало ваш вопрос слишком локализованным, чтобы быть полезным для кого-либо еще, поэтому я попытался его обобщить.   -  person George Stocker    schedule 18.04.2012


Ответы (2)


Используйте плагин для загрузки файлов Jquery.

Я обычно использую plupload.

http://www.plupload.com/

Мой пример использования PlUpload:

с учетом:

<div id="file-upload-continer">
    <div id="btnInsertFile" style="display: inline-block; width: 100px; border: 1px solid gray;">Choose File</div>
</div>

<table class="file-upload-box">
<tr>
     <th>Title</th><th></th><th></th>
</tr>
</table>

<script type="text/javascript">
$(function () {
    var uploader = new plupload.Uploader({
        url: '@Url.Action("Upload")',
        multipart : true,
        multipart_params: { },
        runtimes: 'html5,html4',
        container: 'file-upload-continer',
        button_browse_hover : true,
        browse_button: 'btnInsertFile'
    });

    uploader.bind('Init', function (up, params) {
        $('.select-document, .file-upload-box').removeClass("hidden");
        $('.upload-support').addClass("hidden");
    });

    uploader.init();

    uploader.bind('FilesAdded', function (up, files) {
        $.each(files, function (i, file) {
            var newRow = 
                "<tr class='file-row' id='" + file.id + "'>" +
                    "<td class='title'>" + file.name + " (" + formatFileSize(file.size) + ") </td>" +
                    "<td class='cancel' id='cancel" + file.id + "'></td>" +
                    "<td class='status' id='cancel" + file.id + "'></td>" +
                "</tr>";

            $('.file-upload-box').append(newRow);

            //Bind cancel click event
            $('#cancel'+file.id).click(function(){
                $('#' + file.id).remove();
                uploader.removeFile(file);
                $(this).unbind().remove();
            });                 

        });

        uploader.start();
    });

    uploader.bind('BeforeUpload', function (up, file) {
        $(".status", ".file-row#" + file.id).addClass('throbber');
    });

    uploader.bind('FileUploaded', function (up, file) {
        $(".throbber", ".file-row#" + file.id).addClass('success').removeClass('throbber');
        $(".cancel", ".file-row#" + file.id).removeClass('cancel');
    });

    uploader.bind('Error', function (up, err) {
            $(".throbber", ".file-row#" + err.file.id).addClass('error').removeClass('throbber');
            $(".cancel", ".file-row#" + err.file.id).removeClass('cancel');
    });

});

</script>

и в моем контроллере:

public ActionResult Upload(string name = "", int chunk = 0)
{
    if (Request.Files.Count < 1)
        return Json(false);

    HttpPostedFileBase fileUpload = Request.Files[0];

    // Save file

    return Json(true, "text/html");
}
person Morteza    schedule 18.04.2012
comment
Эта вещь будет использовать Html5, где это возможно, с запасными вариантами для flash, silverlight и gears. Кажется, это работает очень хорошо. - person jcreamer898; 18.04.2012
comment
Как насчет этой ссылки aspzone.com /техника/ - person thinkmmk; 18.04.2012

Если вы хотите использовать jQuery для загрузки файлов, я рекомендую вам эту библиотеку:

http://www.uploadify.com/

Он может загружать несколько файлов асинхронно. На их сайте достаточно примеров.

http://www.uploadify.com/demos/

person Rob Angelier    schedule 18.04.2012
comment
Я не хочу использовать флеш-плагины. - person thinkmmk; 18.04.2012