2017-06-22 17 views
0

醜いファイルのアップロードボタンを隠すことで、より上手なアップロードコントロールをしようとしています。 以下のコードを使用して、ファイルアップロードコントロールを非表示にし、ユーザーがクリックできるリンクを提供しました。私はまた、ファイルが選択されたことをユーザーに知らせる必要があります。XPageでより良いファイルアップロードコントロールを作成する方法

フォームを送信する前にユーザーが選択したファイル名を取得するにはどうすればよいですか?

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
    <xp:label id="label2" for="fileUpload1"> 
     <i class="fa fa-image"></i> 
     &#160; 
     <i class="fa fa-paperclip"></i> 
     <xp:fileUpload id="fileUpload1" value="#{newtopic.Body}" 
      style="display:none"> 
     </xp:fileUpload> 
    </xp:label> 
</xp:view> 

enter image description here XSPはまた、次の

var fileUpload1:com.ibm.xsp.component.xp.XspFileUpload = getComponent("fileUpload1"); 
getComponent("computedField1").setValue("FN= " + fileUpload1.getFilename()) 
+0

は私のブログ投稿はあなたを助けることができるかもしれませは、http: //elstarit.nl/2014/07/16/bootstrap-ui-xpages-file-upload-component/ –

+1

「素晴らしいファイルアップロードコントロールを作成するにはどうすればよいですか?または「提出する前にファイル名を取得するにはどうすればよいですか?」 ? –

答えて

2

var eInput=document.getElementById("idOfInputControl"); 
eInput.addEventListener("change",function(){ 
    var i,filename,files; 
    files=this.files; 
    for (i=0;i<files.length;i++) { 
     filename=files[i].name; 
     // do whatever you want with the filename 
    } 
}) 
+0

ありがとう、良い解決策 –

1

は、Twitterのブートストラップファイル入力を見てみましょうしようとしました。普通のファイル入力ピッカーを見た目のいいボタン(ブートストラップスタイリングあり):http://gregpike.net/demos/bootstrap-file-input/demo.htmlに変えます。選択したファイルの名前がボタンの横に表示されます。

それを使用する簡単な方法は、すべてのファイルピッカーのスタイルを設定することです:あなたは、ファイルのプロパティを使用して、選択したファイルを手に入れることができますJavaScriptを使用して

$(document).ready( 
    function() { 
     // Style the file button 
     $('input[type=file]').bootstrapFileInput(); 
    } 
); 

。以下は、jQueryを使った簡単な例です:

var selectedFile = $('input[type=file]').val() 
1

David LeedyのNotesIn9をチェックして、複数のファイルをアップロードすることもできます。あなたが入力要素にのonchangeハンドラを追加することにより、アップロードのために選択したファイルの名前を取得することができ、クライアント側ではhttp://www.notesin9.com/2016/08/25/notesin9-194-upload-files-with-plupload/

関連する問題