загрузить файл через ajax с помощью jquery easy ui

Question

загрузить файл через ajax с помощью jquery easy ui

0

Я пытаюсь предоставить пользователям возможность импортировать данные из файла, который находится на их компьютере, с помощью виджета формы jQuery EasyUI:

<form id="my_form" method="POST">
    <input type="file" name="my_file" id="my_file" />
</form>

var file_name = $('#my_file').val();

if(file_name)
{       
    $('#my_form').form('submit', {
        url: [url_to_call],
        onSubmit: function(param){
             param.file_path = file_name;
        }
    });
}

Затем, когда пользователь просматривает свой компьютер для файла, я хочу отправить путь к запросу ajax jQuery для выполнения некоторых действий по загрузке. Проблема у меня в том, что filename возвращает что-то вроде этого:

C:\fakepath\[name_of_file]

Из-за строки fakepath я не получаю реальный путь к тому, где находится файл на компьютере пользователя. Кто-нибудь знает, как я могу решить эту проблему, пожалуйста?

спасибо

user765368 28 нояб. 2013, в 19:35

Источник

1

Вы не можете загрузить файл с помощью ajax, вам нужно либо загрузить объект formData, либо для не поддерживающих браузер использовать iframe.
adeneo 28 нояб. 2013, в 18:07
0

@adeneo Нет, я реализовал загрузку Ajax в одном из моих приложений, которое поддерживало загрузку изображений в IE7 +. Я показываю им предварительный просмотр изображения сразу после загрузки (без обновления страницы).
Anirudha Gupta 28 нояб. 2013, в 18:14
0

почему бы не использовать Google? для поклонников ajax и file-upload это может быть один из наиболее часто задаваемых вопросов
john Smith 28 нояб. 2013, в 18:17
0

@KingAnirudhaIII - это нечто совершенно иное, это файловый API-интерфейс HTML5, который показывает изображение с компьютера пользователя, и никто не сказал, что вам пришлось перезагрузить страницу, но вы не можете загрузить изображение непосредственно из файла, вы должны загрузить объект formData, содержащий файл изображения, или использовать iframe для отправки формы в браузерах, которые не поддерживают formData.
adeneo 28 нояб. 2013, в 18:18

Показать ещё 2 комментария

Теги:

javascript

jquery

html

jquery-easyui

2 ответа

Ещё вопросы

Вы не можете загрузить файл с помощью ajax, вам нужно либо загрузить объект formData, либо для не поддерживающих браузер использовать iframe.
@adeneo Нет, я реализовал загрузку Ajax в одном из моих приложений, которое поддерживало загрузку изображений в IE7 +. Я показываю им предварительный просмотр изображения сразу после загрузки (без обновления страницы).
почему бы не использовать Google? для поклонников ajax и file-upload это может быть один из наиболее часто задаваемых вопросов
@KingAnirudhaIII - это нечто совершенно иное, это файловый API-интерфейс HTML5, который показывает изображение с компьютера пользователя, и никто не сказал, что вам пришлось перезагрузить страницу, но вы не можете загрузить изображение непосредственно из файла, вы должны загрузить объект formData, содержащий файл изображения, или использовать iframe для отправки формы в браузерах, которые не поддерживают formData.

Anirudha Gupta · Answer 1 · 2013-11-28T17-13-00.000Z

Пробовал этот плагин http://malsup.com/jquery/form/#getting-started

этот плагин предоставляет метод AjaxSubmit(), который отлично работает для загрузки изображения. Я использовал его в 2011 году.

у него есть некоторая проблема в IE (старая версия вроде 6,7). Вам нужно написать несколько хаков. на бэкэнд Firefox и IE загружают правильный формат потока файлов, например Data/Image но в Chrome (Webkit) вы получите Octet Stream. Вам нужно проанализировать формат файла на сервере, чтобы проверить, что файл не является неправильным.

adeneo · Answer 2 · 2013-11-28T16-12-00.000Z

Я понятия не имею, что делает ваша функция form(), поскольку такой метод не существует в jQuery, но обычный способ загрузки файла на сервер будет примерно таким:

$('#my_file').on('change', function() {
    $.ajax({
        url  : [url_to_call],
        data : new FormData($('#my_form').get(0)),
        processData: false,
        contenttype: false
    }).done(function(param) {
        param.file_path = file_name;
    });
});