Как загрузить файл сразу после того, как пользователь выберет его с помощью jQuery?

Question

Привет У меня возникли некоторые проблемы при получении файла, прикрепленного к форме для отправки в jquery .post().

Я хочу, чтобы пользователь выбрал файл / форму, используя jquery .post().У меня это работает нормально, если я просто делаю .submit() на всей форме, но я не хочу использовать его из-за другого контента на сайте.Вот код, который я использую сейчас.то, что это делает, использует кнопку для ввода файла, и я делаю отправку на функцию выбора сразу.

$('.upload').file().choose(function (e, input) {                
            input.attr('name', 'firstPicture');
            input.hide();

            $(input).appendTo('#myForm');

            $('#hiddenDiv').show();

            $.post("/Home/UploadSingelFile", $("#myForm").serialize());
            return false;
        });

мои действия правильные public ActionResult UploadSingelFile(HttpPostedFileBase firstPicture)

Что происходит, когда я делаю, как указано выше, это то, что ввод firstPicture является нулевым, но, как я сказал, если я сделаю отправку, все в порядке.

Если это невозможно, я думаю о том, чтобы сделать .submit(), но тогда мне нужно вернуть частичное представление, и как я собираюсь обновить это частичное представление в div при возврате?так же, как microsofts ajax.form получил цель обновления (я не хочу использовать их форму ajax)

Answer 1

Чтобы дополнить ответ Дарина, я делал это прежде, чем использовать Ajax upload script ранее, и он работал довольно хорошо, и я думаю, что это самое легкое решение из тех, которые мы пробовали в то время.Он работает во всех браузерах и не нуждается ни в какой вспышке или серебристом свете.

Все, что вам нужно сделать, - это создать div так:

<div id="file-uploader"></div>

и инициализировать загрузчик следующим образом:

var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('file-uploader'),
    // path to server-side upload script
    action: '/Home/UploadSingelFile'
});

Это должно дать вам параметр HttpPostedFile, который вам нужен в вашем методе действия.Чтобы впоследствии обновить представление, вы можете использовать различные обратные вызовы, такие как:

onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){},
onComplete: function(id, fileName, responseJSON){},
onCancel: function(id, fileName){},

Обновление:

Чтобы получить загруженный файл на стороне ASP.NET MVC, вынужно сделать еще немного работы.См. Ответ на этот вопрос: MVC3 Valums Ajax File Upload .(кредит Дарину)

Answer 2

При отправке запроса AJAX с использованием jQuery вы просто отправляете запрос application/x-www-form-urlencoded на сервер, тогда как для загрузки файла вам необходимо использовать запрос multipart/form-data.

Существует несколько плагинов, таких каккак jquery form , которые эмулируют эту функциональность с помощью скрытого iframe.Поэтому, в основном, вы напишите следующее, чтобы отрегулировать форму, содержащую входные данные:

$(function() {
    $('#myForm').ajaxForm(function(result) {
        // do something with the results when the form is submitted
    });
});

, а затем, когда вам нужно будет отправить форму:

$('#myForm').ajaxSubmit();

или просто когда пользователь нажимаеткнопка отправки.

Существуют также другие плагины, такие как Uploadify и Plupload , которые позволят вам достичь того же (Uploadify например использует Flash, тогда как Pluploadопределяет, что клиент поддерживает: Flash, Silverlight и, если нет, может использовать скрытые фреймы для имитации загрузки файла).

Но вы можете просто забыть о загрузке файлов с помощью $.post.

---

ОБНОВЛЕНИЕ:

Как @Can Gencer указывает в разделе комментариев, есть также плагин загрузки Ajax , который можно использовать.