Question

如何在无脂肪框架中上传文件。我使用angularjs在无脂肪框架发送帖子请求。我想使用文件扩展名.jpg和大小2mb，并限制只有4个文件。请指导我。

这是我的HTML代码 -

 <div class="col-md-9" style="margin-bottom: 40px" ng-controller="AppController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
                    <h3> upload</h3>
                    <div ng-show="uploader.isHTML5">

                        <input type="file" nv-file-select="" uploader="uploader" multiple  /><br/>


                        <table class="table">
                            <tbody>
                                <tr ng-repeat="item in uploader.queue">
                                    <td><strong>{{ item.file.name }}</strong></td>
                                    <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                                    <td ng-show="uploader.isHTML5">
                                        <div class="progress" style="margin-bottom: 0;">
                                            <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                                        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                                    </td>
                                    <td nowrap>
                                        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                            <span class="glyphicon glyphicon-upload"></span> Upload
                                        </button>
                                        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                                        </button>
                                        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                            <span class="glyphicon glyphicon-trash"></span> Remove
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>

这是我的角度控制器

'use strict';

角

.module('app', ['angularFileUpload'])


.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
    var uploader = $scope.uploader = new FileUploader({
        url: 'uploadfile'
    });

    // FILTERS

    uploader.filters.push({
        name: 'customFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
            return this.queue.length < 10;
        }
    });


    console.info('uploader', uploader);
}]);

这是我的无脂代码

 $f3->route('GET|POST|PUT /uploadfile',
    function($f3) use($db){
     //print_r($f3['BODY']);die;
     $data = $f3['BODY'];
     print_r($data);
     $file_name = $data['filename'];  
     $file = "/ui/uploads";
     $file .= $id . "/";
     $file .= $file_name;
     $f3->set('SESSION.id', $file);
     echo var_dump($file);

    }
);

Answer 1

$f3->route('GET|POST|PUT /uploadfile',
    function($f3) use($db){
     $f3->set('UPLOADS','uploads/'); // don't forget to set an Upload directory, and make it writable!

        $overwrite = false; // set to true, to overwrite an existing file; Default: false
        $slug = true; // rename file to filesystem-friendly version
        $web = \Web::instance();
        $files = $web->receive(function($file,$formFieldName){
                var_dump($file);
                /* looks like:
                  array(5) {
                      ["name"] =>     string(19) "csshat_quittung.png"
                      ["type"] =>     string(9) "image/png"
                      ["tmp_name"] => string(14) "/tmp/php2YS85Q"
                      ["error"] =>    int(0)
                      ["size"] =>     int(172245)
                    }
                */
                // $file['name'] already contains the slugged name now

                // maybe you want to check the file size
                if($file['size'] > (2 * 1024 * 1024)) // if bigger than 2 MB
                    return false; // this file is not valid, return false will skip moving it

                // everything went fine, hurray!
                return true; // allows the file to be moved from php tmp dir to your defined upload dir
            },
            $overwrite,
            $slug
        );

        //var_dump($files);
        //$files will contain all the files uploaded, in your case 1 hence $files[0];
        $answer = array( 'answer' => 'Files transfer completed' );
        $json = json_encode( $answer );
        echo $json;

    }
);

文件上传通过POST完成（根据您的angularUploadModule）您可以在此处查看更多内容：http://fatfreeframework.com/web#receive

如何在无脂肪框架上传文件？

1 个答案: