javascript - 标题字段中上传文件的名称

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>

单击此处查看有效的 JSFiddle。如果您以前从未使用过 jQuery，请告诉我，因为这可能会造成混淆！

编辑：这是替换代码：

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

这是更新的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 ;