Board logo

標題: ajax upload image to php server [打印本頁]
作者: ray    時間: 2020-9-12 10:25     標題: ajax upload image to php server

https://www.ucamc.com/e-learning ... p-ajax-image-upload
作者: ray    時間: 2020-9-12 11:46

本帖最後由 ray 於 2020-9-12 11:59 編輯
  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    時間: 2020-9-12 11:55

  1. date_default_timezone_set("Asia/Taipei");
複製代碼
作者: ray    時間: 2020-9-12 11:57

  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    時間: 2020-9-12 11:57

  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. });
複製代碼




歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2