通过 AngularJS 表单在 Laravel 中获取文件输入值

Get File Input Value in Laravel Via AngularJS form

提问by hahahaha

I want to get value from file input from angularjs form in laravel, but i can't get the value.

我想从 laravel 中 angularjs 表单的文件输入中获取值，但我无法获取该值。

why?

为什么？

angularjs:

角度：

<div ng-controller="UploadImgController" >
    <div ng-repeat="image in images">
        <img ng-src="{{image.image}}" />
    </div>
    <form ng-submit="uploadImg()" method="post" enctype="multipart/form-data">
        Select image to upload:
        <input type="file" name="path" id="path" ng-model="addimages.path" accept="image/*" app-filereader>
        <input type="text" name="propertyid" ng-model="addimages.propertyid">
        <input type="submit" value="Upload Image" name="submit" class="btn btn-primary" >
    </form>
</div>

laravel (UploadImgController.php):

laravel (UploadImgController.php):

public function store()
{

    $file = Input::file('path');
    echo "file: ".$file;
}

(routes.php):

(routes.php):

Route::resource('img','UploadImgController');  

I got no value. What should I do? Thank you. :)

我没有任何价值。我该怎么办？谢谢你。:)

回答by Nay Zaw Oo

I recommend using ng-file-upload.

我建议使用ng-file-upload。

View

看法

<button ng-file-select ng-model="myFiles" ng-file-change="upload($files)">Upload</button>

---

---

Angular JS

角JS

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

app.controller('MyCtrl', ['$scope', '$upload', function ($scope, $upload) {
        $scope.upload = function (files) {
            if (files && files.length){
                for (var i = files.length - 1; i >= 0; i--) {
                    var file = files[i];
                    $upload.upload({
                        url: '/upload',
                        fields: {key: 'value'},
                        file: file
                    })
                    .progress(function (evt) {
                        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                        console.log('File upload ' + progressPercentage + "% complete.");
                    })
                    .success(function (data, status, headers, config) {
                        console.log(data);
                    })
                    .error(function(data, status, headers, config) {
                        console.log(data);
                    });
                }
            } 
        };
    }
]);

---

---

Laravel Route

Laravel 路线

Route::post('upload', [
    'uses'    => 'FileUploadController@upload'
]);

Laravel Controller

Laravel 控制器

public function upload() {
    $file = \Input::file('file');
    return $file;
}

回答by Cengkuru Michael

You can pull that off without a plugin actually. I did face a similar problem once and this is how I went about it.

你实际上可以在没有插件的情况下完成它。我曾经遇到过类似的问题，这就是我的处理方式。

View

看法

<input type="file" name="file" onchange="angular.element(this).scope().uploadImage(this.files)"/>

Angularjs Controller

Angularjs 控制器

$scope.uploadavtar = function (files) {
                var fd = new FormData();
                //Take the first selected file
                fd.append("file", files[0]);

                $http.post("/upload-url" + $scope.school.profile.id, fd, {
                    withCredentials: true,
                    headers: {'Content-Type': undefined},
                    transformRequest: angular.identity
                }).then(function successCallback(response) {
                    $scope.result = response;
                    // this callback will be called asynchronously
                    // when the response is available
                }, function errorCallback(response) {
                    console.log(response);
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                });
            }

Routes.php

路由.php

Route::post('/upload-url', 'UsersController@uploadFile');

Laravel Controller

Laravel 控制器

// Upload files
    public function uploadFile(Requests\UpdateuploadfileRequest $request, $id)
    {

        $extension = Input::file('file')->getClientOriginalExtension(); 
        $fileName = time().'.'.$extension; // renameing image
        $destination = 'uploads/img'. $fileName;

        move_uploaded_file($_FILES['file']['tmp_name'], $destination);

    }
}

Request validation file (UpdateuploadfileRequest.php)

请求验证文件 (UpdateuploadfileRequest.php)

/**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        $rules = [

        ];

        return $rules;
    }