Как отправить данные формы без отправки формы с помощью jQuery?

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

<img src=".../attachments/f8725841986a40061b0f4da9f7ee45dd.png" width="100" height="100" border="0" alt="Avatar Not Available" src="..." id="avatar_response"/> 
<input type="file" name="avatar" size="30"><a href="javascript:void(0);" rel="submitFile" data-input-name="avatar">Save</a> 


$(document).on('click', '[rel="submitFile"]', function(){ 

    console.log('anchor clicked'); 

    var $anchor = $(this); 
    var input_name = $anchor.data('input-name'); 
    var file_input = $('#'+input_name+'_file'); 
    console.log(file_input); 

    var postdata = new FormData(); 

    var files = file_input.files; 
    console.log(files); 

    postdata.append(input_name, files[0]); 

    $.ajax({ 
     type: "POST", 
     url: "http://basecommand/index.php/ajax/upload/avatar/"+input_name, 
     dataType: "xml", 
     contentType: false, 
     processData: false, 
     statusCode: { 
      404: function(){ 
       console.log("The file was not found."); 
      } 
     }, 
     error: function(jqXHR, textStatus){ 
      console.log("AJAX Error: "+textStatus); 
     }, 
     success: function(xml) 
     { 
      console.log("ajax successful"); 
      $(xml).find("upload").each(function(){ 
       var fileurl = $(this).find("fileurl").text(); 
       var response = $(this).find("response").text(); 
       console.log(fileurl); 
       console.log(response); 
      }) 
     } 
    }); 

});

источник

2014-09-09 ShoeLace1291

Избавьтесь от 'HREF = "JavaScript: недействительным (0);" 'и добавить' return false; 'в конце функции click после кода' ajax'. «Файл» можно отправить через ajax, но он должен быть создан внутри объекта «FormData» HTML5. Вот [ответ на SO] (http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax), посвященный этому самому вопросу. – Ohgodwhy

вам необходимо предотвратить действие по умолчанию нажатия кнопки (которое может представлять форму). Поэтому либо возвращаем false из обработчика кликов, либо вызываем 'event.preventDefault()' где 'event' является первым параметром для обработчика кликов –

@ Ohgodwhy, я продолжаю получать сообщение об ошибке« Недопустимый оператор возврата », если я изменяю void (0) для возврата false. И я также попробовал объект FormData, но я продолжаю получать сообщение об ошибке «Невозможно прочитать свойство« 0 »неопределенного». Я обновил свой код. – ShoeLace1291

Попробуйте это:

var postdata = new FormData(); 
if (formId == "imageForm") { 
    var filesList = document.getElementById('imgFile'); 
    for (var i = 0; i < filesList.files.length; i++) { 
     postdata.append('file', filesList.files[i]); 
    } 
}

Вы можете добавить другие параметры, например:

formdata = $("#" + formId + "").serialize() + "&ProductId=" + productId + "&Sku=" + sku + "&IsVideo=" + isVideo;

источник

2014-09-09 03:41:58

Как отправить данные формы без отправки формы с помощью jQuery?

ответ

Смежные вопросы