如何上傳圖像，而無需重新加載

Question

我有一個PHP函數，上傳圖片在我的文件夾圖片頁面：

if(isset($_FILES['filename'])) 
 
{ 
 
$Dest = dirname(__FILE__).'/images/'; 
 
if(!isset($_FILES['filename']) || !is_uploaded_file($_FILES['filename']['tmp_name'][0])) 
 
{ 
 
die('Something went wrong with Upload!'); 
 
} 
 

 
$ImageName = str_replace(' ','-',strtolower($_FILES['filename']['name'][0])); 
 
$ImageType = $_FILES['filename']['type'][0]; //"image/png", image/jpeg etc. 
 
    
 
$ImageExt = substr($ImageName, strrpos($ImageName, '.')); 
 
$ImageExt = str_replace('.','',$ImageExt); 
 
    
 
$ImageName = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName); 
 

 
//Create new image name (with random number added). 
 
$NewName = $ImageName.'.'.$ImageExt; 
 
    
 
move_uploaded_file($_FILES['filename']['tmp_name'][0], "$Dest/$NewName"); 
 
$base_path="http://".$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']); 
 
$base=$base_path.'/'.'images/'.$NewName; 
 
?> 
 
<script> 
 
\t window.history.back(); 
 
</script> 
 
<?php 
 
}

這裏是我的形式：

<form action="images.php" ng-show="data.uploadFile" method="post" enctype="multipart/form-data" name="fileupload" id="fileupload"> 
 
\t <input name="filename[]" id="filename" type="file" /> 
 
\t <input type="submit" id="submit" ng-click="data.uploadFile = !data.uploadFile" value="Upload" /> 
 
</form>

最後，這是我的js代碼，從文件夾中獲取所有圖片：

sliders.controller('MainController', ['$scope', '$interval', '$http', function($scope, $interval, $http) { 
 

 
\t $scope.data = {uploadFile: false}; 
 

 
\t //variables for slider #1 
 
\t $scope.timer1; 
 
\t $scope.index1 = 0; 
 
\t 
 
\t //variables for slider #2 
 
\t $scope.timer2; 
 
\t $scope.index2 = 0; 
 
\t 
 

 
\t $http.get('images.php').success(function(data) { 
 
\t \t $scope.images = data.split(','); 
 
\t \t $scope.images.pop(); 
 
\t }); //get array with images and put in $scope.images

我使用angularJs，實際上我不明白我怎麼可以用角或AJAX上傳例如，如果我將在我的表單中使用一些js函數而不是action =「images.php」，那麼將如何工作php上傳函數？

如果有人向我解釋我將不勝感激，我該如何做到這一點，謝謝。

Answer 1

images.phpYou可以試試這個代碼：

在HTML：

/* Add id parameter to form */ 
<form id="form-id" action="images.php" ng-show="data.uploadFile" method="post" enctype="multipart/form-data" name="fileupload" id="fileupload"> 
    <input name="filename[]" id="filename" type="file" /> 
    <input type="submit" id="submit" ng-click="data.uploadFile = !data.uploadFile" value="Upload" /> 
</form> 

在您的JS：

/* Prevent submit and send by Ajax Call */ 
$(document).ready(function (e) { 
    $('#form-id').on('submit',(function(e) { 
     e.preventDefault(); 
     var data = new FormData(this); 

     $.ajax({ 
      type: 'post', 
      url: 'images.php', 
      processData: false, 
      contentType: false, 
      data: data, 
      success: function(result){ 
       console.log(result); 
      }, 
      error: function(error){ 
       console.log("error"); 
      } 
     }); 
    })); 
}); 

更新：

我補充說： 「過程數據」 和「contentType」參數傳遞給Ajax Call。

Answer 2

有很多插件可用於文件上傳，無需加載頁面並自行顯示圖像預覽。我列出在這裏演示鏈接插件..

1. dropzone
2. Bootstrap file upload