ajax upload image to php server

ray

https://www.ucamc.com/e-learning ... p-ajax-image-upload

ray

1. <?php
   
2.     if(is_array($_FILES)) {
   
3.         if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
   
4.             $sourcePath = $_FILES['userImage']['tmp_name'];
   
5.                         if(file_exists("images"))
   
6.                                 mkdir("images");
   
7.             $targetPath = "images/".date("Y-m-d_H_i_s").".".substr($_FILES['userImage']['name'],-3);//$_FILES['userImage']['name'];
   
8.         if(move_uploaded_file($sourcePath,$targetPath)) {
   
9. ?>
   
10.             <img class="image-preview" src="/<?php echo $targetPath; ?>" class="upload-preview" />
    
11. <?php
    
12.             }
    
13.         }
    
14.     }
    
15. ?>

複製代碼

ray

1. date_default_timezone_set("Asia/Taipei");

複製代碼

ray

1. <form id="uploadForm" action="upload.php" method="post">
   
2.     <label>Upload Image File:</label><br/>
   
3.     <input name="userImage" type="file" class="inputFile" />
   
4.     <input type="submit" value="Submit" class="btnSubmit" />
   
5. </form>
   
6. <div id="targetLayer"></div>
   
7. <script
   
8.   src="https://code.jquery.com/jquery-3.5.1.js"
   
9.   integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
   
10.   crossorigin="anonymous">
    
11. </script>
    
12. <script src="image.js"></script>

複製代碼

ray

1. $(document).ready(function (e){
   
2.         $("#uploadForm").on('submit',(function(e){
   
3.                 e.preventDefault();
   
4.                 $.ajax({
   
5.                         url: "upload.php",
   
6.                         type: "POST",
   
7.                         data:  new FormData(this),
   
8.                         contentType: false,
   
9.                         cache: false,
   
10.                         processData:false,
    
11.                         success: function(data){
    
12.                                 $("#targetLayer").html(data);
    
13.                         },
    
14.                         error: function(data){
    
15.                                 $("#targetLayer").html(data);
    
16.                         }               
    
17.                 });
    
18.         }));
    
19. });

複製代碼