AJAX를 통해 이미지 전달

AJAX를 통해 이미지 전달

이 질문에는 이미 다음과 같은 답이 있습니다.

jQuery로 비동기식으로 파일을 업로드하려면 어떻게 해야 합니까? (34개 답변)

마감됨8년 전에.

기본적으로 양식을 제출할 때 Ajax와 함께 이미지 파일을 전달하고 이미지를 검색하여 첨부 파일로 이메일로 보내고 싶습니다.

양식은 다음과 같습니다.

<form role="form" action="" name="devis" id="devis" method="post" enctype="multipart/form-data" class="form-horizontal">
    <fieldset>
        <div class="form-group">
            <label class="control-label col-md-4" for="societe">Company</label>
            <div class="col-md-8">
                <input type="text" class="form-control input-md col-md-8" name="societe" value="" maxlength="" id="societe">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="message"><span class="required">* </span>Message</label>
            <div class="col-md-8">
                <textarea rows="5" name="message" class="form-control input-md col-md-8" maxlength="" required="" style="resize:none;" id="message"></textarea>
            </div>
        </div>
        <div class="form-group" id="input_file">
            <label class="control-label col-md-4" for="image_input_field">Logo</label>
            <div class="col-md-8">
            <div class="input-group uploaddiv">
                <span class="input-group-btn">
                    <span class="btn btn-default btn-file">
                        Parcourir <input type="file" id="image_input_field" name="file">
                    </span>
                </span>
                <input type="text" class="form-control" readonly="">
            </div>
            </div>
        </div>
    <div class="form-group">
    <div class="form-actions col-md-9 col-md-offset-3 text-right">
        <input type="submit" value="Envoyer" name="" class="btn btn-primary" id="submit">
        <input type="reset" value="Annuler" name="" class="btn btn-default" id="reset">
        </div>
    </div>
    </fieldset>
</form>

내 코드에서 오류가 무엇인지 찾을 수 없습니다! 여기 AJAX 호출이 있습니다.

jQuery(document).on("click", "#submit", function(e) {
      e.preventDefault();
      var fileInput = document.getElementById('image_input_field');
      var file = fileInput.files[0];
      var formData = new FormData();
      formData.append('file', file);
      // console.log(file);

      var societe = $("input#societe").val();
      var message = $("textarea#message").val();
      jQuery.ajax({
        url: "ajax.php",
        type: "post",
        data: {
           'file': file,
           'module' : 'ajax_data_form',
           'societe': societe,
           'message': message
        },
        cache: false,

        success: function(reponse) {
          if(reponse) {
            alert(reponse);
            // console.log(reponse);
            // jQuery('#devis').trigger("reset");
          } else {
            alert('Erreur');
          }
        }
      });
     });

그리고 여기 아약스가 있습니다.php:

<?php
if( isset($_POST['module']) && $_POST['module'] == "ajax_data_form" )
{
     var_dump($_FILES);
}

$.ajax({
    type: "POST",
    url: pathname,
    data: new FormData($('#devis')[0]),
    processData: false,
    contentType: false,
    success: function (data) {
        $("#divider").html(data);
    }
});

그리고 정상적으로 파일 데이터를 가져옵니다.$_FILES[];.왜냐면FormData자동으로 처리됩니다.multipartAjax 요청의 헤더입니다.

해보시겠어요?

<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function() {
  var fileInput = document.getElementById('image_input_field');
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append('file', file);
  // console.log(file);

  var societe = $("input#societe").val();
  var message = $("textarea#message").val();

      $.ajax({
        url: "ajax.php",
        type: "POST",
        data: "file="+file,
        cache: false,

        success: function(reponse) {
          if(reponse) {
            alert(reponse);

            // console.log(reponse);
            // $('#devis').trigger("reset");
          } else {
            alert('Erreur');
          }
        }
      });
 }); });
</script>

agax.php에서

그냥 쓰기

 echo 'something';

이미 알고 계시겠지만, Ajax 호출을 통한 파일 업로드는 불가능하며, HTML5 FILE I/O API가 준비되고 주요 브라우저에서 구현되면 가능할 것입니다.

jQuery iframe 포스트 폼 플러그인을 사용하여 iframe에 데이터를 게시하여 사용자 환경이 Ajax 호출(페이지 부분 업데이트)과 유사하도록 할 수 있습니다.

링크는 다음과 같습니다. https://github.com/dogzworld/iframe-post-form

설명: "이 jQuery agax 업로드 플러그인은 숨겨진 iframe을 만들고 폼의 대상 속성을 해당 iframe에 게시하도록 설정합니다.양식이 제출되면 양식이 숨겨진 iframe에 게시됩니다(파일 업로드 포함).마지막으로 플러그인은 iframe에서 서버의 응답을 수집합니다."

앞서 언급한 바와 같이 서버에서 응답을 보내고 그에 따라 웹 페이지에 업데이트를 표시할 수 있습니다.데모 페이지가 있어야 하는데 지금은 작동하지 않습니다.

파일 업로드에도 사용할 수 있습니다.

호출 예:

jQuery('#frmId').iframePostForm({
    json : true,
    post : function () {
        //return true or false
        return true;
    },
    complete : function (response) {
        //complete event
        console.log(response);
    }
});

Jquery Form 플러그인 링크라는 Jquery 플러그인 사용

저는 단순히 jquery를 사용하여 양식을 제출하고 당신이 원하는 모든 데이터를 숨겨진 필드에 보관할 수 있는 것을 제안합니다.

$("#devis").ajaxSubmit(options); 
return false;

당신은 이렇게 php 페이지에서 파일을 쉽게 얻을 수 있습니다.

$ImageTempname  = $_FILES['ImageFile']['tmp_name'];
$ImageFilename  = $_FILES['ImageFile']['name'];
$ImageType      = $_FILES['ImageFile']['type'];

등등...

언급URL : https://stackoverflow.com/questions/25504659/pass-an-image-through-ajax