html file选择文件一次之后就失效了怎么办

网页中的选择文件其实很简单就一个文件选择控件而已。

<input type="file" id="file" name="file"/>

其实用这个默认的显示出来的样子在网页中不好看，常常我们为了美观，可能会采用下面的方式来实现。

首先将file隐藏起来。

<input type="file" style="display: none;" id="file" name="file" >

然后弄个文本框，弄个按钮来进行文件选择。

<div class="input-group">

<input type="text" id="file" name="codeFile" class="form-control" disabled="disabled">

<span class="input-group-btn">

<button type="button" class="btn" id="openFile">

<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&nbsp;&nbsp;选择...

</button>

</span>

</div>

这样是不是比原始的效果要好看多了。

那么file已经被隐藏了，点击按钮如何弹出选择文件的框呢，用jquery来触发file的单击事件即可。

$("#openFile").click(function(){

$("#file").trigger("click");

});

我这边想要在文件选择完之后就马上上传文件到服务器，就只能在file的change事件中进行上传了。

$("#file").change(function(){

//upload....

});

这样确实可以实现上传，问题是这种方式只有第一次选择文件的时候可以，紧跟着第二次来选文件，会发现选中之后没反应了，触发不了change事件了。

解决这问题的唯一办法就是不要用jquery这种绑定事件的方法来实现change,直接在file中加上onchange即可。

<input type="file" style="display: none;" id="file" name="file" onchange="upload()">