想要在不同的ejs文件中显示用户选择的图像

时间:2016-08-04 20:24:26

标签: angularjs

我在我的ejs文件中显示用户选择的图像,但我希望用户在不同的ejs文件中选择图像。

Ejs文件

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>
</head>

<div class="container">
    <div class="row" ng-controller="PatientEmrController">
        <h1>Upload a file</h1>
        <div class="col-sm-4">
            <form ng-submit="uploadFile()" class="form">
                <input type="text" placeholder="title" ng-model="titleText" class="form-control" required>
                <br><br>


<file-field ng-model="uploadThis" class="btn" ng-class="{'btn-success':uploadThis}" preview="uploadPreview" name="up" accept="image/png,image/jpg,image/jpeg">Select file</file-field>
                <br><br>
                <input type="submit">
            </form>
        </div>
        <div class="col-sm-4">
            <img ng-src="{{uploadPreview}}" ng-if="uploadPreview" class="img-responsive" >   
        </div>
    </div>
</div>


</html>

Js文件

sample.controller('PatientEmrController',['$scope','$http','$injector',function($scope,$http, $injector){



    //  $injector.invoke(ParentCtrl, this, {$scope: $scope});


    // $scope.title = 'project';
    // $scope.image_url = 'images/generic.jpg';
    // $scope.image_num = 14; //image count -> [0.jpg, 1.jpg, 2.jpg, ..., 13.jpg]




$scope.myFunction = function(){
       return "https://www.google.co.in/images/srpr/logo11w.png"
       // return "uploadPreview"
    }

    $scope.uploadFile=function(n){

        if(!$scope.uploadThis){
            alert('Please select a file to upload.')
            return;
        }






        var fd = new FormData();

        //you can also send other fields
        //this will be available as req.body.title
        //NOTE: files must be added AFTER other form data
        fd.append('title', $scope.titleText);

        //nacho relates to what we called the file
        //in the api on sails
        fd.append('nacho', $scope.uploadThis);
        $http.post('/api/burrito', fd, {
            //transformRequest: angular.identity,
            //headers: {'Content-Type': undefined}
            up:$scope.uploadThis,
            title: $scope.titleText,
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(data){
            console.log('upload data',data);
            if(data.result){

                alert('file uploaded. See .tmp/uploads folder.');
            }


        })
        .error(function(err){
            alert('there was an error uploading the file.');
            console.log(err);
        });        
    }


}]);

在这个js文件中,我使用了myFunction,并且我在ejs文件中绑定了这个函数(我想在其中显示用户选择的图像,我在ng-src中使用了这个函数)。这里,一个图像返回ejs文件,因为,我写了一个图片网址,所以谷歌图片返回,所以我想在这里返回用户选择的图片,怎么可能?

0 个答案:

没有答案