Question

我有一个问题。我无法使用Angular.js将图像文件存储在本地文件夹中。请检查下面的代码。

的index.html：

<div class="col-md-6 bannerimagefile" ng-controller="imgController">
<form  name="form">
<label for="bannerimage" accesskey="B"><span class="required">*</span> Banner Image</label>
<input type="file" class="filestyle" data-size="lg" name="bannerimage" id="bannerimage" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}" custom-on-change="uploadFile" multiple>
<label for="bannerimage" accesskey="B" ><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;" ng-repeat="step in stepsModel">
<img ng-src="{{step}}" border="0" name="bannerimage" style="width:70px; height:70px;">
</div>
<div><input type="button" id="btn" ng-click="submitImage();" value="Upload" /></div>
<div class="clear"></div>
</form>
</div>

以下代码是我的控制器文件。

var app=angular.module('testImage',['ngFileUpload']);
app.controller('imgController',function($scope,$http,$filter){
    $scope.submitImage=function(){
        var today = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss');
        var newpath=today+"_"+ $scope.file.name;
        var arrFile={'name':newpath,'size':$scope.file.size,'type':$scope.file.type};
        var data={'image':arrFile}
        $http({
            method:'POST',
            url:"upload.php",
            data:data,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function successCallback(response){
            console.log('res',response);
        },function errorCallback(response) {
        });
    }
    $scope.stepsModel = [];
    $scope.uploadFile = function(event){
        console.log('event',event.target.files);
        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
         var file = files[i];
             var reader = new FileReader();
             reader.onload = $scope.imageIsLoaded; 
             reader.readAsDataURL(file);
     }
    };
    $scope.imageIsLoaded = function(e){
    $scope.$apply(function() {
        $scope.stepsModel.push(e.target.result);
    });
}
});
app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.bind('change', onChangeHandler);
    }
  };
});

在上面的代码中，我为每个图像创建了唯一的名称，我需要的时候还会保存具有相应唯一名称的图像。

upload.php的：

<?php
if(isset($_FILES['image'])){    
    $errors= array();        
    $file_name = $_FILES['image']['name'];
    $file_size =$_FILES['image']['size'];
    $file_tmp =$_FILES['image']['tmp_name'];
    $file_type=$_FILES['image']['type'];   
    $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
    $extensions = array("jpeg","jpg","png");        
    if(in_array($file_ext,$extensions )=== false){
         $errors[]="image extension not allowed, please choose a JPEG or PNG file.";
    }
    if($file_size > 2097152){
        $errors[]='File size cannot exceed 2 MB';
    }               
    if(empty($errors)==true){
        move_uploaded_file($file_tmp,"upload/".$file_name);
        echo " uploaded file: " . "images/" . $file_name;
    }else{
        print_r($errors);
    }
}
else{
    $errors= array();
    $errors[]="No image found";
    print_r($errors);
}
?>

通过使用这个PHP代码，我在浏览器控制台中始终收到No image found消息。请帮我这样做。

$ _FILES无法使用Angular.js $ http帖子

0 个答案: