変更ボタンのテキスト入力タイプ=ファイルボックスは

Question

を満たされたとき、私は次のセットアップ持っている：「SELECT」

• は、ファイルブラウザが開き、ファイルが選択されてクリックされました。
• readonlyテキストボックスに表示されます選択したファイルのパスが
• 「SELECT」ファイルボタンの変更の機能は、「SELECT」ボタンをに変更する場合

は、私はまた、テキストをしたいファイルを提出しますファイルが選択されたとき（テキストボックスが空でないとき）に限り、 "アップロード"します。

私はon-changeとon-inputをテキストボックスに使用しようとしましたが、成功しませんでした...どのようなヒントも大歓迎です。続き

は私のコードです：

HTML

<div class="horizontal layout fileUploadContainer"> 
    <paper-button class="upload" id=uploadButton on-click="uploadButton">Select</paper-button> 
    <input type="text" id="fileName" class="fileName" placeholder="File..." on-click="changeButton" on-change="changeButton"></input> 
    <input type="file" class="fileUpload" id="fileUpload" on-change="newFile"> 
</div> 

CSS

.fileUpload { 
    display: none; 
    } 

    .fileName { 
    width: 200px; 
    padding-left: 10px; 
    border: 1px solid var(--divider-color); 
    } 

JS

続き

Answer 1

は、しかしテストされていない、アプローチです：

$('#file_button').click(function(){ 
    $(this) 
     .text("Upload") 
     .attr('type','submit'); 
    }); 

Answer 2

あなたが好きなファイル入力に変更イベントを使用することができます。また

newFile: function(e) { 
    // Change fileName value to selected filename 
    this.$.fileName.value = e.target.files[0].name; 
    // Change uploadButton value 
    this.$.uploadButton.value = 'Upload'; 
} 

、及び場合に、上記の例にはありません正しくバインドするには、非表示の入力を使用する代わりに、次のように使用します。

var input = document.createElement('input'); 
input.type = 'file'; 
input.onchange = function(e) { 
    // Change fileName value to selected filename 
    this.$.fileName.value = e.target.files[0].name; 
    // Change uploadButton value 
    this.$.uploadButton.value = 'Upload'; 
}.bind(this); 
input.click();