(作者:ヤ青春ゞ滋味,撰写时间:2019年6月9日)
下面我们来讲一下,当我们点击浏览的按钮的时候,我们需要它触发file弹出文件选择框后,我们需要它选择了文件之后,把我选择中的文件名称,给回填到我的另一个input标签里。
下面是我的HTML代码:
这样我们已经把HTML代码给完成了。
那么下一步就是Jquery方法。我们需要分析一下思路,因为我们需要的是当我们点击按钮的时候才让它触发file,所以我们这个时候就要让它隐藏起来,如下图是我按钮的点击事件,当然我们也可以用tirgger()方法触发被选元素的指定事件类型,如果我们用这个方法的话,我们需要把我们隐藏掉的input标签里的ID传到tirgger里面去。不过我用的是click()方法。
这时候我们就会发现我们已经实现了点击按钮触发file,因为我们要让它实现弹出文件选择器,然后通过选择文件并把它的文件名称赋给input标签上,让它显示出来,那么我们就可以通过change()方法来实现。
第一步,我们需要获取FileUpload对象,代码如下:
var fileExecl = document.getElementById("getAttachmentFile").files;
这个时候为了我们知道我们要的值是什么,我们可以通过控制台输出一下:
这个时候我们可以发现File里面的name是我们需要把它显示在input标签上的值,所以下面请看我的代码:
这个时候我们想要的效果就已经完成了。下面请看效果图:如果我们想限制他的文件选择为EXCEL表格的话,我们就只需要appect属性就可以了。
完整的代码如下:
这样我们就已经实现了这个功能。
这个时候我们在控制台上遇到了一个问题,一开始并不会报错,但是我们点击文件,获取文件名称后,我们再次点击按钮的时候让弹出文件选择器,我们选择了文件,但是这时我们如果点取消的话,控制台就会报一个错误,但是这个问题不影响我们做后面的代码。
有解决方法的,可以在下方评论区评论。