[html , php] 파일 업로드

//==========
* html 

<form id="upload" action="upload.php" method="post" enctype="multipart/form-data">
    Select File to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload File" name="submit"> 
</form>


//================
* php

<?php
$target_dir = "../files";
$key = 'fileToUpload';
$target_file = $target_dir .'/'. basename($_FILES[$key]["name"]);
move_uploaded_file( $_FILES[$key]['tmp_name'], $target_file);


//===========================
[javascript] 파일 업로드, 드래그앤 드롭, Ajax 이용 업로드

Drag And Drop File Upload Using JavaScript And PHP
https://artisansweb.net/drag-drop-file-upload-using-javascript-php/

<!doctype html>
<html>
    <head>

    </head>
    <style>
        #drop_file_zone {
            background-color: #EEE; 
            border: #999 5px dashed;
            width: 290px; 
            height: 200px;
            padding: 8px;
            font-size: 18px;
        }        
        #drag_upload_file #selectfile {
          display: none;
        } 
    </style>
    <body >

        <div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
          <div id="drag_upload_file">
            <p>Drop file here</p>
            <p>or</p>            
            <p><input type="button" value="Select File" onclick="file_explorer();"></p>
            <input type="file" id="selectfile">
          </div>
        </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
      var fileobj;
      function upload_file(e) {
        e.preventDefault();
        fileobj = e.dataTransfer.files[0];
        ajax_file_upload(fileobj);
      }

      function file_explorer() {
        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function() {
            fileobj = document.getElementById('selectfile').files[0];
          ajax_file_upload(fileobj);
        };
      }

      function ajax_file_upload(file_obj) {
        if(file_obj != undefined) {
            var form_data = new FormData();                  
            form_data.append('file', file_obj);
          $.ajax({
            type: 'POST',
            url: 'ajax.php',
            contentType: false,
            processData: false,
            data: form_data,
            success:function(response) {
              alert(response);
              $('#selectfile').val('');
            }
          });
        }
      }
    </script>

    </body>
</html>

//===================================
File drag and drop
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

function dropHandler(ev) {
        console.log('dropHandler');
        ev.preventDefault();        
            // Use DataTransfer interface to access the file(s)
            for (var i = 0; i < ev.dataTransfer.files.length; i++) {
                let item = ev.dataTransfer.files[i];        
                console.log('dropHandler-2', item, '... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
            }
        
    }


//=======================
Uploading Files with AJAX 
https://blog.teamtreehouse.com/uploading-files-ajax
- 여러 데이터 유형 보내기 , File, Blob


FormData.append() method is used to handle Files, Blobs, or Strings.
// Files
formData.append(name, file, filename);
// Blobs
formData.append(name, blob, filename);
// Strings
formData.append(name, value);    

Posted by 코덴스

댓글을 달아 주세요