实现步骤:1.创建一个input file标签,并设置该标签为隐藏的;
eg:<input type="file" id="file1" name="file1" style="display:none"/>
2.创建一个input text标签,来显示选中的文件路径;
eg:<input type="text" value="未选择文件" id="tex"/>
3.创建一个超链接标签,通过点击该链接间接点击了文件标签;
eg:<a οnclick="$('#file1').click()>选择文件</a>
4.通过一段JavaScript代码,将选中的文件路径显示在文本框中;
eg:<script>$(function(){ $("#file1").change(function(){ $("#tex").val($("#file1").val());});});</script>
注意:该段代码必须要加jQuery框架
完整代码如下:
<input type="file" id="file1" name="file1" style="display:none"/>
<div class="input-append">
<input id="filePath" class="input-sm" type="text" value="未選択ファイル" style="height:30px;font-size:13px;border-radius:5px">
<a class="easyui-linkbutton" style="height:30px" οnclick="$('input[id=file1]').click();">選択ファイル</a>
</div>
<script type="text/javascript">
$(function () {
$('input[id=file1]').change(function () {
$('#filePath').val($(this).val());
});
});
</script>