jQuery AJAX 파일 업로드 PHP

159

인트라넷 페이지에서 가능한 가장 작은 설정으로 간단한 파일 업로드를 구현하고 싶습니다.

이것은 내 HTML 부분입니다.

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

그리고 이것은 내 JS jquery 스크립트입니다.

$("#upload").on("click", function() {
    var file_data = $("#sortpicture").prop("files")[0];   
    var form_data = new FormData();
    form_data.append("file", file_data);
    alert(form_data);
    $.ajax({
        url: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

웹 사이트의 루트 디렉토리에는 "users"및 "IIS_users"에 대한 변경 권한이있는 "uploads"라는 폴더가 있습니다.

파일 형식의 파일을 선택하고 업로드 버튼을 누르면 첫 번째 경고가 "[object FormData]"를 반환합니다. 두 번째 경고가 호출되지 않고 "업로드"폴더도 비어 있습니다!?

누군가 내 잘못을 찾도록 도울 수 있습니까?

또한 다음 단계는 서버 측에서 생성 된 이름으로 파일 이름을 바꾸는 것입니다. 어쩌면 누군가 나에게 이것에 대한 해결책을 줄 수 있습니다.

javascript  php  jquery  ajax  upload 
— 사용자 2355509
소스
:이 첫 번째 읽어주십시오 stackoverflow.com/questions/166221/...
— 빈센트 Decaux
모든 것이 나를 위해 작동합니다. 아마 PHP 코드입니까?
— Korikulum 2016 년
이 양식과 "연결된"다른 것은 없습니다. 내 PHP 코드는 무엇을 의미합니까?
— user2355509
내 말은, 코드가 작동하고 문제가 서버 측 코드에 있다는 것입니다.
— Korikulum
AJAX 스크립트를 실행할 때 500 오류 코드가 표시됩니까? 서버 측 오류임을 나타냅니다. 또한 : 디버깅하는 동안 PHP 파일의 응답을 콘솔에 출력해야합니다. 이렇게하면 PHP 코드에서 오류가 발생하면 무슨 일이 일어나고 있는지 알 수 있습니다.
— Diederik

답변:

285

파일을 업로드 디렉토리로 이동하려면 서버에서 실행되는 스크립트가 필요합니다. jQuery ajax메소드 (브라우저에서 실행)는 양식 데이터를 서버로 보낸 다음 서버의 스크립트가 업로드를 처리합니다. 다음은 PHP를 사용하는 예입니다.

HTML은 괜찮지 만 JS jQuery 스크립트를 다음과 같이 업데이트하십시오.

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text',  // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // display response from the PHP script, if any
        }
     });
});

이제 서버 측 스크립트에서는이 경우 PHP를 사용합니다.

upload.php : 서버에서 실행되고 파일을 uploads 디렉토리로 보내는 PHP 스크립트 :

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

또한 대상 디렉토리에 대한 몇 가지 사항 :

  1. 올바른 서버 경로 를 가지고 있는지 확인하십시오 . 즉, PHP 스크립트 위치에서 업로드 디렉토리의 경로를 시작하십시오.
  2. 쓰기 가능한지 확인하십시오 .

그리고 upload.php 스크립트 move_uploaded_file에서 사용되는 PHP 함수에 대해 조금 :

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name']파일이 업로드 될 때의 이름입니다. 당신은 그것을 사용할 필요가 없습니다. 파일에 원하는 이름 (서버 파일 시스템 호환)을 지정할 수 있습니다.

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

마지막으로, PHP upload_max_filesizeAND post_max_size구성 값을 알고 테스트 파일도 초과하지 않아야합니다. 다음은 PHP 구성 을 확인 하는 방법 과 최대 파일 크기 설정 및 게시 설정 방법에 대한 도움말 입니다.

— 피 묻은
소스
블러디 너클 스! 고마워, 나는 이것이 큰 것이라고 생각합니다. 그래서 나는 PHP 파일을 추가했고, 이제 조금 더 가깝습니다. 두 번째 경고도 나타납니다! 그러나 폴더는 여전히 비어 있습니다.
— user2355509 2016 년
아, form_data.append함수 에서 형식 입력 이름 "sortpic"이 "file"로 변경되었습니다 . 그래서 새로운 양식 입력 이름을 반영하도록 PHP 스크립트를 변경했습니다. 또한 디버깅에 도움이되도록 PHP 스크립트 응답을 ajax 성공 알림으로 가져 왔습니다.
— bloodyKnuckles
1
버디, 그것은 나를에서 정의되지 않은 인덱스 파일 에러 제공$_FILES['file']
— 헨 드리 다나카
1
코드 prop ( 'files') [0] 인 @partho는 서버에 업로드 할 로컬 파일에 액세스합니다. 자세한 설명이 필요하면 jQuery 함수 "prop"및 "html5 파일 업로드"를 찾아보십시오.
— bloodyKnuckles
1
이 문제를 해결했는데 그 이유는 파일 크기가 너무 컸기 때문입니다.
— ron tornambe
4 
**1. index.php**
<body>
    <span id="msg" style="color:red"></span><br/>
    <input type="file" id="photo"><br/>
  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  </script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '<img src="'.$location.'" height="100" width="100" />';
}
— 하시 브 카말
소스
2 
var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});
— 아자르
소스
0

그리고 이것은 uplaoded 파일을받을 PHP 파일입니다

<?
$data = array();
    //check with your logic
    if (isset($_FILES)) {
        $error = false;
        $files = array();

        $uploaddir = $target_dir;
        foreach ($_FILES as $file) {
            if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) {
                $files[] = $uploaddir . $file['name'];
            } else {
                $error = true;
            }
        }
        $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
    } else {
        $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST);
    }

    echo json_encode($data);
?>
— kavehmb
소스
뭐라고입니다 if (true)거야? 항상 참으로 평가하고 있습니까? 그렇지 않습니까? 또한 당신은 여분의 곱슬 머리를 가지고 있습니다.
— Mr.Web
나는 당신을 위해 그것을 고쳤다. :)
— Mr.Web
0

순수한 js 사용

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}
<input id="sortpicture" type="file" name="sortpic" />
<button id="upload" onclick="saveFile()">Upload</button>
<br>Before click upload look on chrome>console>network (in this snipped we will see 404)
스 니펫 확장

파일 이름은 요청에 자동으로 포함되며 서버가 읽을 수 있으며 'content-type'은 자동으로 'multipart / form-data'로 설정됩니다. 다음은 오류 처리 및 추가 json 전송과 함께 더 발전된 예입니다.

코드 스 니펫 표시

— 카밀 키에브 제 스키
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.