如何上传图像，而无需重新加载

我有一个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上传函数？

如果有人向我解释我将不胜感激，我该如何做到这一点，谢谢。

来源

2015-07-13 Wahtel

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。

来源

2015-07-13 11:15:50 Oscargeek

在这里网址：“URL： 'http://your.server.com/path/'， ' 它应该是我的PHP文件的路径？ – Wahtel

是的，“url”与form中的“action”相同，在这种情况下，“images.php”改变回复。 – Oscargeek

不幸的是发生错误：Uncaught TypeError：非法调用 – Wahtel

有很多插件可用于文件上传，无需加载页面并自行显示图像预览。我列出在这里演示链接插件..

dropzone
Bootstrap file upload

来源

2015-07-13 11:20:24

如何上传图像，而无需重新加载

回答

相关问题