上傳文件的標題字段的名稱

Question

我們在YouTube上自動上傳任何視頻時看到過，表單的標題欄中填充了視頻文件的名稱。我怎樣才能做到這一點？

我的形式是

<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p> 
    <span class="form_label">Title</span><input type="text" value="" name="title" style="width:400px" class="inputText required"></p> 
    <p><label>Upload</label><input type="file" name="song"> 
    <p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id"> 
</form> 

Answer 1

下面是一些jQuery代碼，使其工作：

$('#myfile').change(function(){ 
    var fileValue = $(this).val(); 
    $('#mytitle').val(fileValue); 
}); 

而這裏的修改HTML：

<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p> 
    <span class="form_label">Title</span><input id="mytitle" type="text" value="" name="title" style="width:400px" class="inputText required"></p> 
    <p><label>Upload</label><input id="myfile" type="file" name="song"> 
    <p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id"> 
</form> 

Click here爲工作的jsfiddle。如果你以前從未使用過jQuery，那麼告訴我，因爲這可能會讓你感到困惑！

編輯：這裏的替換代碼：

$('#myfile').change(function(){ 
    var fileValue = $(this).val(); 
    fileValue = fileValue.replace('_', ' '); 
    fileValue = fileValue.replace('-', ' '); 
    $('#mytitle').val(fileValue); 
}); 

Here's the updated jsfiddle

Answer 2

使用此代碼：

//use this in your form tag 
<input id="song" type="file" /> 
//use this in your destination(action) 
document.title = document.getElementById("song").value ;