Отправка данных из нескольких HTML-форм с использованием JQuery ajax

Здравствуйте, я только начинаю изучать jquery ajax для загрузки файла.Отправка данных из нескольких HTML-форм с использованием JQuery ajax

Я использую простую форму html здесь и вставляю в нее код javascript/jquery для выполнения запроса ajax.

<!DOCTYPE HTML> 

<html> 
<head> 
    <script type='text/javascript' src='jquery-2.1.3.min.js'></script> 
</head> 
<body> 
    <form id='entryform' method=""> 
     <input id='formText' type='text' name='text'><br> 
     <input id='formFile' type='file' name='file'> 
    </form> 
    <div id='fill'></div> 
</body> 
<script> 
    $(document).ready(function(){ 
     $('#entryform').change(function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       url : 'ajax.php', 
       data : new FormData(this), 
       processData : false, 
       contentType : false, 
       type : 'POST', 
       success : function (retval){ 
        $('#fill').html(retval); 
       } 
      }); 
     }); 
    }); 
</script>

И это PHP код процесса:

<?php 

$updir = 'images/'; 

move_uploaded_file($_FILES['file']['tmp_name'], $updir.$_FILES['file']['name']); 

//echo $updir._FILES['file']['name']; 
echo "<img src='".$updir.$_FILES['file']['name']."'>";

I выше код я пытаюсь загрузить изображение без перезагрузки страницы и показать изображение на сразу после загрузки изображения.

Но когда я пытаюсь запустить код, я получаю странное поведение, то есть, когда вводит ввод в текстовую форму, значение из текстовой формы, которая была недавно введена, отображается немедленно.

Я имею в виду, что я хочу, чтобы файл формы сразу показывался пользователю при загрузке не текста формы.

Любая идея, как исправить это? без опускания текстовой формы?

источник

2015-04-10 Lundu Harianja

В чем проблема? это совершенно неясно – insanityCode

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

, если вы укажете правильный путь $ updir в теге img, тогда изображение будет отображаться в корне, из вашего кода im получается сломанное изображение, im не получает ant text –

Я думаю, вам нужно добавить Event handler в formFile, чтобы это вам помогло.

$(document).ready(function() { 
    $('#formFile').change(function (e) { 
     var myfiles = $(this).get(0); 
     var files = myfiles.files; 
     var data = new FormData(); 
     for (i = 0; i < files.length; i++) { 
      data.append('file', files[i]); 
     } 
     e.preventDefault(); 
     $.ajax({ 
      url : 'ajax.php', 
      data : data, 
      processData : false, 
      contentType : false, 
      type : 'POST', 
      success : function (retval) { 
       $('#fill').html(retval); 
      } 
     }); 
    }); 
});

источник

2015-04-10 06:13:01 Raja

Не могли бы вы объяснить, почему добавление обработчика событий в 'formFile' вместо в' entryform'? –

Отправка данных из нескольких HTML-форм с использованием JQuery ajax

ответ

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