js实现点击按钮弹出上传文件的窗口

要实现点击按钮弹出上传文件的窗口，在前端开发中需要使用JavaScript。具体的实现方法有多种，可以通过原生JavaScript或使用一些现成的插件库来实现。本篇攻略将为大家介绍一种基于原生JavaScript的实现方式。

HTML部分（示例一）

首先，在HTML文件中需要创建一个按钮元素和一个file input元素，代码如下：

<button id="uploadButton">上传文件</button>
<input type="file" id="fileInput" style="display:none;">

其中，<button>元素用于触发上传文件的操作，<input>元素则是用来选择要上传的文件。

JavaScript部分（示例一）

接下来，在JavaScript中，需要使用DOM对象获取按钮和file input元素，并给按钮绑定一个点击事件，点击时通过调用file input的click()方法来触发上传文件窗口的弹出，同时监听file input的change事件，当文件选择后，获取文件的信息，并执行上传操作。完整代码如下：

var uploadButton = document.getElementById('uploadButton');
var fileInput = document.getElementById('fileInput');
uploadButton.addEventListener('click', function () {
    fileInput.click();
});

fileInput.addEventListener('change', function () {
    //获取选择的文件信息
    console.log(fileInput.files[0]);
    //执行上传操作
});

需要注意的是，由于file input元素不允许修改样式，为了使UI更加友好美观，可以将其设置成display:none;状态，并通过按钮点击来间接触发。同时获取文件信息和上传操作将使用回调函数进行异步操作。

jQuery部分（示例二）

除了使用原生JavaScript来实现，也可以使用jQuery来实现。jQuery是一个非常流行的JavaScript插件库，可以使代码更加简洁易懂。示例代码如下：

<button id="uploadButton">上传文件</button>
<input type="file" id="fileInput" style="display:none;">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#uploadButton').click(function () {
            $('#fileInput').click();
        });

        $('#fileInput').change(function () {
            //获取选择的文件信息
            console.log(this.files[0]);
            //执行上传操作
        });
    });
</script>

这里首先要引入jQuery库，在代码中利用jQuery来获取按钮和file input元素，并绑定点击事件和change事件，实现文件上传操作。

以上两个示例都可以实现点击按钮弹出上传文件的窗口，具体实现方式可以根据具体需求和项目场景进行选择。