jQuery AJAX 파일 업로드 PHP

Programing

jQuery AJAX 파일 업로드 PHP

crosscheck 2020. 6. 22. 07:59

jQuery AJAX 파일 업로드 PHP

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

이것은 내 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]"를 반환합니다. 두 번째 경고가 호출되지 않고 "업로드"폴더도 비어 있습니다!?

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

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

파일을 업로드 디렉토리로 이동하려면 서버에서 실행되는 스크립트가 필요합니다. 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']);
    }

?>

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

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

그리고 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 구성 을 확인 하는 방법 과 최대 파일 크기 설정 및 게시 설정 방법에 대한 도움말 입니다.

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);
    }
});

**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" />';
}

그리고 이것은 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);
?>

순수한 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 전송과 함께 더 발전된 예입니다.

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

Best File Upload Using Jquery Ajax With Materialise Click Here to Download

When you select image the image will be Converted in base 64 and you can store this in to database so it will be light weight also.

참고URL : https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php

'Programing' 카테고리의 다른 글

왜 Objects.requireNonNull ()을 사용해야합니까? (0)	2020.06.22
Java의 Mod가 음수를 생성 함 (0)	2020.06.22
일반 목록-목록 내에서 항목 이동 (0)	2020.06.22
악성 코드를 정규식에 넣을 수있는 방법이 있습니까? (0)	2020.06.22
메이븐 다운로드 진행 표시 비활성화 (0)	2020.06.22

현재글jQuery AJAX 파일 업로드 PHP

crosscheck

jQuery AJAX 파일 업로드 PHP

jQuery AJAX 파일 업로드 PHP

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

jQuery AJAX 파일 업로드 PHP

jQuery AJAX 파일 업로드 PHP

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바