[javascript] jQuery Ajax 파일 업로드

다음 jQuery 코드를 사용하여 ajax 요청의 POST 메소드를 사용하여 파일 업로드를 수행 할 수 있습니까?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

가능하다면 data부품 을 채워야 합니까? 올바른 방법입니까? 파일을 서버 측에만 게시합니다.

나는 인터넷 검색을 해왔지만 계획에서 플러그인을 사용하고 싶지 않다는 것을 알았습니다. 적어도 지금은

답변

AJAX를 통한 파일 업로드는 ~~불가능~~ 합니다.
을 사용하여 페이지를 새로 고치지 않고도 파일을 업로드 할 수 있습니다 IFrame.
자세한 내용은 여기를 참조 하십시오 .

최신 정보

XHR2에서는 AJAX를 통한 파일 업로드가 지원됩니다. 예를 들어 FormData객체를 통해 유감스럽게도 모든 브라우저에서 지원되지는 않습니다.

FormData 지원은 다음 데스크탑 브라우저 버전에서 시작됩니다.

IE 10 이상
Firefox 4.0 이상
크롬 7 이상
사파리 5+
오페라 12+

자세한 내용은 MDN 링크를 참조하십시오 .

답변

더 이상 ajax를 통해 파일을 업로드하는 데 iframe이 필요하지 않습니다. 나는 최근에 혼자서 해냈습니다. 이 페이지를 확인하십시오.

AJAX 및 jQuery와 함께 HTML5 파일 업로드 사용

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

답변을 업데이트하고 정리했습니다. getSize 함수를 사용하여 크기를 확인하거나 getType 함수를 사용하여 유형을 확인하십시오. 진행률 표시 줄 HTML 및 CSS 코드가 추가되었습니다.

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

업로드 클래스를 사용하는 방법

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

진행률 표시 줄 HTML 코드

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

진행률 표시 줄 CSS 코드

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

답변

Ajax 게시 및 업로드 파일이 가능합니다. jQuery $.ajax파일을로드 하는 기능을 사용하고 있습니다. XHR 객체를 사용하려고 시도했지만 PHP로 서버 측에서 결과를 얻을 수 없습니다.

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

보시다시피 비어 있거나 $('#yourForm').serialize())기존 (직렬화 된?- 기존 양식) 의 FormData 객체를 만든 다음 입력 파일을 첨부해야합니다.

여기에 대한 자세한 내용은 다음과 같습니다 – jQuery.ajax와 FormData를 사용하여 파일을 업로드하는 방법
– jQuery를 통해 업로드 파일을 객체 FormData가 제공되며, 파일 이름, GET 요청

PHP 프로세스의 경우 다음과 같은 것을 사용할 수 있습니다.

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR:
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE:
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION:
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}

답변

간단한 업로드 양식

 <script>
   //form Submit
   $("form").submit(function(evt){
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>

<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/>
      </td>
    </tr>
  </table>
</form>

스 니펫 확장

답변

나는 이것에 꽤 늦었지만 아약스 기반 이미지 업로드 솔루션을 찾고 있었고 내가 찾고있는 대답은이 게시물 전체에 흩어져 있습니다. 내가 해결 한 솔루션은 FormData 객체와 관련이 있습니다. 내가 작성한 코드의 기본 형태를 조립했습니다. fd.append ()를 사용하여 양식에 사용자 정의 필드를 추가하는 방법과 ajax 요청이 완료 될 때 응답 데이터를 처리하는 방법을 보여줍니다.

html 업로드 :

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

PHP로 작업하는 경우 위의 HTML에 표시된 두 가지 사용자 정의 필드를 모두 포함하는 업로드를 처리하는 방법이 있습니다.

Upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

답변

로 AJAX 업로드가 가능합니다 XMLHttpRequest(). iframe이 필요하지 않습니다. 업로드 진행률을 표시 할 수 있습니다.

자세한 내용은 https://stackoverflow.com/a/4943774/873282 를 참조 하여 jQuery 업로드 진행률 및 AJAX 파일 업로드 에 질문 하십시오 .

답변

이 작업을 수행하는 방법은 다음과 같습니다.

HTML

<input type="file" id="file">
<button id='process-file-button'>Process</button>

$('#process-file-button').on('click', function (e) {
    let files = new FormData(), // you can consider this as 'data bag'
        url = 'yourUrl';

    files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'

    $.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

PHP

if (isset($_FILES) && !empty($_FILES)) {
    $file = $_FILES['fileName'];
    $name = $file['name'];
    $path = $file['tmp_name'];


    // process your file

}