2017-09-09 23 views
-1

私はPinterestに複数のファイルをアップロードするためのWebクライアントを作成しています。これはまさに個人的な目的のためです。フロントエンドはAngularJSで、テキストボックスとファイルアップロード要素はkendo-uiです。私はフロントエンドの開発を何年もやっていないし、真剣にやってはいないし、1つのページでは今は始めたくない。だから、私は複数の場所からのコピー貼り付けを中心にページをまとめました。テキストフィールドの値を使用してアップロードURLを動的に作成するにはどうすればよいですか?

私は、剣道のアップロード要素に、saveUrlという名前があり、指定されたファイルを指定されたURLに投稿するという問題があると言いました。私の目的のために、そしてRESTにとどまるためには、最後にテキストボックスの値を追加してsaveUrlを作成したいと思います。私はこれを達成するための手がかりを持っていないので、ここにいる。

以下は私がこれまで行ってきたことです。私が探しているのはboardの値をsaveUrlに追加することです。したがって、ユーザーがテキストボックスboardに「何でも」と入力すると、saveUrlsave/whateverになります。

<div id="main" ng-app="Pinterest"> 
    <div class="demo-section k-content" ng-controller="PinterestController"> 
     <div> 
      <h4>Board Name</h4> 
      <input type="text" id="board" name="board" class="k-textbox" required style="width: 400px;"/> 
     </div> 
     <div style="padding-top: 2em;"> 
      <h4>Upload files</h4> 
      <input name="files" 
        type="file" 
        kendo-upload 
        k-async="{ saveUrl: 'save', removeUrl: 'remove', autoUpload: false }" 
      /> 
     </div> 
    </div> 
    <script> 
    angular.module("Pinterest", ["kendo.directives"]) 
     .controller("PinterestController", function($scope){ 
     }) 


    </script> 
</div> 

答えて

0

私はこれを誰かのおかげで解決しました。

<body> 
<div id="main" ng-app="pinterest"> 
    <div class="demo-section k-content" ng-controller="PinterestController"> 
     <div> 
      <h4>Board Name</h4> 
      <input type="text" id="board" name="board" class="k-textbox" required style="width: 400px;" 
        ng-model="modelObj.board"/> 
      <p class="demo-hint">Will be created if doesn't exist</p> 
     </div> 
     <div style="padding-top: 2em;"> 
      <h4>Upload files</h4> 
      <input name="files" 
        type="file" 
        kendo-upload 
        k-async="{ saveUrl: 'pinterest/{board}', autoUpload: false }" 
        k-upload="onUpload" 
      /> 
     </div> 
    </div> 
</div> 
<script src="js/app.js"></script> 
</body> 

app.js

(function() { 
    var app = angular.module("pinterest", ["kendo.directives"]); 
    app.controller("PinterestController", function($scope) { 
    $scope.modelObj = { 
     board: $scope.board 
    }; 
    $scope.onUpload = function(e) { 
     var saveUrl = e.sender.options.async.saveUrl; 
     e.sender.options.async.saveUrl = saveUrl.replace("{board}", $scope.modelObj.board) 
    } 
    }); 
})(); 
関連する問題