Question

我还是webdev的新手，我似乎无法弄清楚我上传图片时遇到的问题。当我使用firebug尝试缩小问题时，我得到一个＆＃34; document.getElementById（...）为null＆＃34;错误。

在apache2错误日志中，我也看到以下错误消息。我现在已经解决了这个问题大约4个小时无济于事。我真的很感激这个问题的一些帮助。

[Wed Dec 09 22:48:37.204338 2015] [:error] [pid 956] [client 127.0.0.1:51149] PHP Notice:  Undefined index: fileToUpload in /var/www/html/js/upload_image.php on line 15, referer: http://127.0.0.1/
[Wed Dec 09 22:48:37.204383 2015] [:error] [pid 956] [client 127.0.0.1:51149] PHP Notice:  Undefined index: file in /var/www/html/js/upload_image.php on line 17, referer: http://127.0.0.1/

这是我的HTML标记。

<html ng-app="app">
  <head>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
  </head>

  <nav class="navbar navbar-default">
    <div class="container">                 <!-- top intro part -->
      <div class="navbar-header">
    <a class="navbar-brand" href="#/">  OPENCV 3.0.0</a>
      </div>

      <ul class="nav navbar-nav navbar-right">
    <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#/about"><i class="fa fa-shield"></i> About</a></li>
    <li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li>
      </ul>
    </div>
  </nav>

  <body ng-controller="MainController">
    <div class="row"> <!-- Dropdown menu  -->

      <div class="col-md-20">
    <div id="main">
      <form class="form-horizontal" role="form">
        <label class="control-label col-md-2">Filter List:</label>
        <div class="col-md-5">

          <select class="form-control"
              ng-model="template"
              ng-options="t as t for t in templates">
          </select>
        </div>
      </form>
    </div>
      </div>

      <input type="file" id="file" name="file"/>
      <button ng-click="add()">Upload</button>

    </div>

    <div ng-include="template.url"><div>

    <script src="js/angular.min.js"></script>
    <script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>    
    <script src="js/app.js"></script>

  </body>
</html>

这是我的php

<?php

$input_dir = "uploads"; // where image is should come from json object

$uniqueID_output = date('m.d.Y.h.i.s.a').uniqid()."."; // uniqueID should be a json object that is passed to php

if ($_SERVER['HTTP_CLIENT_IP'])           {$today    = $uniqueID_output . $_SERVER['HTTP_CLIENT_IP'];}  // get local ip of user
else if($_SERVER['HTTP_X_FORWARDED_FOR']) {$uniqueID_output = $uniqueID_output.$_SERVER['HTTP_X_FORWARDED_FOR'];}
else if($_SERVER['HTTP_X_FORWARDED'])     {$uniqueID_output = $uniqueID_output.$_SERVER['HTTP_X_FORWARDED'];}
else if($_SERVER['HTTP_FORWARDED_FOR'])   {$uniqueID_output = $uniqueID_output.$_SERVER['HTTP_FORWARDED_FOR'];}
else if($_SERVER['HTTP_FORWARDED'])       {$uniqueID_output = $uniqueID_output.$_SERVER['HTTP_FORWARDED'];}
else if($_SERVER['REMOTE_ADDR'])          {$uniqueID_output = $uniqueID_output.$_SERVER['REMOTE_ADDR'];}
else                                      {$uniqueID_output = $uniqueID_output.'UNKNOWN';}

$input_img = $input_dir . basename($_FILES["fileToUpload"]["name"]); //name of uploaded 
$imageFileType = pathinfo($input_img,PATHINFO_EXTENSION);
$tmp_name = $_FILES["fileToUpload"]["tmp_name"];

$uploadOk = 1;

if(isset($_POST["submit"])) {

  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);

  if($check == false) {$uploadOk = 0;}
  else if ($imageFileType != "jpg" && $imageFileType != "jpeg" && $imageFileType != "png") {$uploadOk = 0;}

  if ($uploadOk == 1){

    $uniqueID_input = $input_dir . $uniqueID_output . $imageFileType;

    move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $uniqueID_input);

  } 
}

exit();

?>

angularJS

var app = angular.module("app", ["ui.bootstrap"]);

//http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
app.factory("API", function ($http) {
    return {
    uploadImage: function (image) {
        $http.post("upload_image.php", image);
    }
    }
});

app.controller("MainController",function($scope, API) {
    $scope.imageUrl = "";

    $scope.template = "";

    $scope.templates = [];

    $scope.templates.push("select an option...");
    $scope.templates.push("MakeGray");
    $scope.templates.push("Canny");

    $scope.template = $scope.templates[0];

    $scope.add = function() {
    var f = document.getElementById("file").files[0];
    var r = new FileReader();
    r.onloadend = function(e) {
        var data = e.target.result;

        API.uploadImage(data)
        .success(function (imgUrl) {
            $scope.imageUrl = imgUrl;
        })
        .error (function (error) {
        });
    }

    r.readAsBinaryString(f);
    }
});

无法通过angularJS

0 个答案: