Загрузка файла angularjs при выборе файла с помощью php

Я хотел загрузить изображение после выбора без кнопки отправки.
Я использовал danialfarids плагины с GitHub.
Полагаю, он сделал сервер с C#, который я хотел изменить на php. У меня проблемы с написанием обработчика файлов php.

Это мои файлы скриптов.

 var app = angular.module('fileUpload', ['ngFileUpload']);

    app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
        $scope.uploadPic = function(file) {
            file.upload = Upload.upload({
                method:'POST',
                url: 'http://localhost/angular/upload.php',
                data: {file: file, username: $scope.username}
            });

            file.upload.then(function (response) {
                $timeout(function () {
                    file.result = response.data;
                });
            }, function (response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
                file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
        }
    }]);

А это мой html файл

<form name="myForm"  >
<fieldset>

    <legend>Upload on file select</legend>
    <br>Photo:
    <input type="file" ngf-select="uploadPic(picFile)" ng-model="picFile" name="picFile"
           accept="image/*" ngf-max-size="2MB" required
           ngf-model-invalid="errorFiles">

    <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb">

    <br>
    <button ng-disabled="!myForm.$valid"
            ng-click="uploadPic(picFile)">Submit</button>

    <div class="con">
        <div class="pg" style="width:{{picFile.progress}}%"  ></p></div>
    </div>
    <p ng-bind="picFile.progress + '%'"></p>
           <span ng-show="picFile.result">Upload Successful</span>
    <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</fieldset>
</form>

это css

<style>
    .thumb {
        width: 240px;
        height: 240px;
        float: none;
        position: relative;
        top: 7px;
    }
    form .progress {
        line-height: 1px;
    }
    .progress {
        display: inline-block;
        width: 300px;
    }

    .con{
        width:300px;
    }
    .pg {
        font-size: smaller;
        background: #000000;
        width:0px;
        height:1px;
    }
</style>

И это рудиментарный upload.php (найденный в localhost/angular/), и я не думаю, что он работает.

<?php if ( !empty( $_FILES ) ) {

$tempPath = $_FILES[ 'picFile' ][ 'tmp_name' ];
$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'uploads' . DIRECTORY_SEPARATOR . $_FILES[ 'picFile' ][ 'name' ];

move_uploaded_file( $tempPath, $uploadPath );

$answer = array( 'answer' => 'File transfer completed' );
$json = json_encode( $answer );

echo $json; } else {

echo 'No files'; } ?>

Мой сервер xampp работает. Я также включил файлы angular, angularjs, ng-file-upload-shim.min.js и ng-file-upload.min.js из danialfarid.


person natnael zeleke    schedule 06.03.2016    source источник
comment
Что не работает? Это 404? 500? Что возвращает служба, есть ли вывод с точки зрения синтаксических ошибок и т. д.?   -  person Jorg    schedule 06.03.2016
comment
Изображение не загружается.   -  person natnael zeleke    schedule 06.03.2016
comment
@danial Я изменил входной файл html с ngf-select=uploadPic(picFile) на ngf-select-uploadPic($file), но он все еще не работает. должен ли $file быть похож на ng-модель ввода. как насчет имени ввода. Должно быть тоже похоже.   -  person natnael zeleke    schedule 06.03.2016
comment
попробуйте использовать php-код в репозитории модуля загрузки   -  person charlietfl    schedule 06.03.2016


Ответы (1)


Я нашел ответ на этот вопрос, проблема была не в коде, проблема возникла из-за того, что я отправлял XMLHttpRequest в домен, отличный от того, в котором находился. И простой способ решить эту проблему — добавление расширения в хром. расширение Cors. Это решило проблему.

person natnael zeleke    schedule 07.03.2016