jQuery AJAX 파일 업로드 PHP

jQuery AJAX 파일 업로드 PHP

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

이것은 내 HTML 부분입니다.

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

이것은 JS JS 스크립트입니다.

$("#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]"를 반환합니다. 두 번째 경고가 호출되지 않으며 "업로드"폴더도 비어 있습니다.

누군가가 내 발견을 도울 수 있습니까?

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

해결법

1. ==============================

   1.

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

   또한 대상 디렉토리에 대한 몇 가지 사항은 다음과 같습니다.

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

   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_filesize 및 post_max_size 구성 값을 알고 테스트 파일이 둘 중 하나를 초과하지 않도록하십시오. 다음은 PHP 구성을 확인하는 방법과 max filesize 및 post settings를 설정하는 방법에 대한 도움말입니다.

2. ==============================

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

3. ==============================

   3.

   이것은 업로드 된 파일을받는 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);
   ?>
   

4. ==============================

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

5. ==============================

   5.

   Materialize로 Jquery Ajax를 사용하여 최상의 파일 업로드 다운로드 하시려면 여기를 클릭하세요

   이미지를 선택하면 이미지가 기본 64로 변환되어 데이터베이스에 저장할 수 있으므로 가벼운 무게가됩니다.

from https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php by cc-by-sa and MIT lisence