Как отправитьданные из AJAX, поместив их в объект? - PullRequest
Новая
       2

Как отправитьданные из AJAX, поместив их в объект?

0 голосов
/ 04 декабря 2018

У меня есть простой файл загрузки в моем HTML, например, так: 

<div class="col-md-12">
    <span id="fileUploadErr">Please Upload A File!</span>
    <div  style="margin-bottom: 10px;"></div>
    <input id="pickUpFileAttachment" type="file" name="attachFileObj" size="60" />
</div>

Когда я нажимаю кнопку «Отправить» , происходит следующее действие: 

$("form").submit(function() {
    event.preventDefault();

    var assignmentObj1 = {

        selectionId: trDataSecondTable.selectionId,
        inout: "in",
        letterReceivedBy: $("#letterReceivedBy").val(),
        letterIssuedSubBy: $("#letterIssuedSubBy").val(),
        representativeNameEng: $("#representativeNameEng").val(),

        letterId: 2,
        assessmentNo: 0
        imageFile: $("#representativeNameEng").val()
        imageTitle:
    }

    console.log(jsonData);
    $.ajax({

        url: A_PAGE_CONTEXT_PATH + "/form/api/saveProcessAnexTwo",
        method: "post",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify(assignmentObj1),
        success: function(response) {

        },
        error: function(response) {
            switch (response.status) {
                case 409:
                    alert("error");
            }
        }
    });
});

Мне нужно присвоить fileName и загруженный файл при отправке из AJAX и поместить его в переменную assignmentObj1 , поэтому я попытался: imageFile: $("#representativeNameEng").val(), чтобы получить информацию о файлено это не придет.Как я могу получить информацию о файле и отправить из AJAX, поместив ее в локальную переменную?А также, как я могу получить имя файла, который можно поместить в свойство imageTitle:?

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

Вот как бороться с файлом: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery Ajax File Upload</title>
</head>
<body>

<div class="col-md-12">
   <span id="fileUploadErr">Please Upload A File!</span>
   <div  style="margin-bottom: 10px;"></div>
   <input id="pickUpFileAttachment" type="file" name="pickUpFileAttachment" size="60" />
</div>
    
    <div class="result"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
   
   //  $("form").submit(function(){
    
        $('#pickUpFileAttachment').change(function(e){
          var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]); 
           
         
            $.ajax({
                url : window.location.pathname + "/form/api/saveProcessAnexTwo",
             data: formData,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
    processData: false, 
                success: function(response){
                 alert("suc");
                    $('.result').html(response.html)
                    
                } , error: function(response){
                        switch(response.status){
                            case 409:
                            alert("error");
                        }}
            });
        });
        //});
    });
    </script>
</body>
</html>
0 голосов
/ 04 декабря 2018

Самый простой способ - использовать formData для отправки данных: 

var data = new FormData();
$.each($('#filecontainer')[0].files, function(i, file) {
   data.append('file-'+i, file);
});

Итак, теперь у вас есть объект formData 

$.ajax({
   url: 'php/upload.php',
   data: data,
   cache: false,
   contentType: false,
   processData: false,
   method: 'POST',
   type: 'POST', // For jQuery < 1.9
   success: function(data){
      alert(data);
   }
});

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...