js 模拟弹框选择文件异步无刷新上传

最新推荐文章于 2023-01-12 13:47:33 发布

weixin_30639719

最新推荐文章于 2023-01-12 13:47:33 发布

阅读量143

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/cxyzhangjie/p/8185015.html

版权

<html>
<head>
<script type="text/javascript">
function test()
{
var inputObj = document.createElement('input');//创建<input />
　　　　inputObj.setAttribute('id', '_ef'); //创建id <input id="_ef" />
　　　　inputObj.setAttribute('type', 'file'); //创建type <input id="_ef" type="file" />
　　　　inputObj.setAttribute("style", 'visibility:hidden'); //创建style <input id="_ef" type="file" style="visibility:hidden" />
　　　　document.body.appendChild(inputObj);
　　　　inputObj.click(); //选择（触发改隐藏按钮）

　　　uploadFile(inputObj.value);

}

function uploadFile(userfile) {
        var fd = new FormData();         //FormData对象
        var length = userfile.files.length;        //获取选中文件的个数(单文件直接追加即可)
        for(var i=0; i<length; i++){
            fd.append("userfile", userfile.files[i]);    //多文件追加到FormData
        }
        //fd.append("userfile", userfile.files[0]);        //单文件追加到FormData
        var xhr = new XMLHttpRequest();       //XMLHttpRequest对象
        xhr.open("POST", "${qy }/upload/uploadFiles");      //初始化一个请求
        // 注意：所有相关的事件绑定必须在调用send()方法之前进行.
        xhr.send(fd);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
    }

</script>
</head>
<body>
<button type="button" οnclick="test()">点击这里</button>
</body>
</html>

这是一个模拟创建元素并在前端触发该元素弹出窗口能够获得选择文件夹的完整路径

转载于:https://www.cnblogs.com/cxyzhangjie/p/8185015.html