Как отправить изображение на сервер на AngularJS?

0

Я пытаюсь отправить изображение на сервер с некоторыми дополнительными данными. Моя проблема заключается в том, что изображение не сохраняется на сервере, где есть другие записи.

ниже мой .html- код:

<div class="widget uib_w_4 d-margins" data-uib="media/file_input" data-ver="0">
   <input type="file" name="image" id="image" 
      accept="image/jpeg, image/png, image/gif" 
      ng-model="image" class="ng-pristine ng-untouched ng-valid">
</div>
<div class="widget uib_w_5 d-margins" data-uib="media/text" data-ver="0">
   <div class="widget-container left-receptacle"></div>
   <div class="widget-container right-receptacle"></div>
   <div>
      <p>Username:</p>
   </div>
</div>

JS-код

< script >
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.SendData = function()
    var data = $.param({
        image: $scope.image,
        username: $scope.username,
    });

    var config = {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;
                charset = utf - 8;
                '
        }
    }
    var param = getParameterByName('id');
    $http.post('myrurl.php', data, config)
        .success(function(data, status, headers, config) {
        window.location.href = 'view.html';
    })
        .error(function(data, status, header, config) {
        alert('Please retry');
    });
};
}); 
< /script>

Я попытался напечатать значение в PHP, используя print_r ($ _ REQUEST);

Значение изображения равно null.

Как отправить изображение на сервер?

  • 1
    как вы обрабатываете вещи на стороне сервера?
  • 0
    Код сервера в норме. Я попытался проверить с помощью запроса на печать. Значение изображения пустое.
Показать ещё 3 комментария
Теги:

1 ответ

0

Довольно легко. Хорошим подходом может быть Base64 кодировать изображение, а затем отправить этот Base64 на сервер; лучшая часть заключается в том, что PHP изначально поддерживает декодирование Base64.

Вы можете сделать что-то вроде:

<!-- In your HTML file -->
<input type="file" id="file" /> 
<input type="submit" ng-click"uploadFile" value="Upload File"/>

Затем в вашем JavaScript:

$("#file").on('change', function(event) {

    var reader = new FileReader();
    reader.onload = function( loadEvent ) {

        $scope.fileData = loadEvent.target.result;
        $scope.$apply();

    };

    reader.readAsDataURL( event.target.files[0] );

});

$scope.uploadFile = function() {

    if ( $scope.fileData === null || $scope.fileData === "" || !($scope.fileData) ) {
        alert("No file has been uploaded");
        return;
    }


    var dtx = eval("(" + atob($scope.fileData.substring("data:application/json;base64,".length)) + ")");

    $http.get( 'yourScript.php?data=' + encodeURIComponent( JSON.stringify(dtx) ) ).then( function(response) {

        if( response.data.status_code == 200 ) {

            // Done!

        } else { ERROR }

    });

};

Наконец, в вашем файле PHP вы можете:

$imageData = base64_decode( $_GET[ 'data' ] ); // Now you have a binary image file. Do whatever you want!
Поделиться
  • 0
    извините это не работает
  • 1
    Можете ли вы рассказать мне немного больше об ошибке? Также помните, что этот код является лишь примером. Вы должны отредактировать его для своих нужд.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню