js弹出窗口获取上传文件全路径资源-CSDN文库

共3个文件

html：3个

版权申诉

35 浏览量 2022-03-26 22:06:16 上传评论收藏 4KB ZIP 举报

在JavaScript（JS）中，弹出窗口是一种常见的交互方式，常用于显示警告、确认消息或者创建自定义对话框。在处理文件上传时，有时我们需要获取用户选择的文件的完整路径，以便进行进一步的操作，如预览、读取或保存文件。在本篇中，我们将深入探讨如何使用JS实现弹出窗口以及获取上传文件的全路径。我们来讨论如何使用JS创建一个弹出窗口。通常，我们会结合HTML和CSS来实现。在HTML中，我们可以创建一个隐藏的`<form>`元素，用于文件选择，并添加一个按钮触发弹出窗口。当用户点击按钮时，JS将显示这个`<form>`，让用户选择文件。例如： ```html <button id="openFile">选择文件</button> <form id="fileForm" style="display: none;"> <input type="file" id="fileInput" /> </form> ``` 接下来，在JS中，我们为按钮添加点击事件监听器，显示文件选择框： ```javascript document.getElementById('openFile').addEventListener('click', function() { document.getElementById('fileForm').style.display = 'block'; }); ``` 为了获取文件全路径，我们可以在用户选择文件后触发一个事件，例如： ```javascript document.getElementById('fileInput').addEventListener('change', function(e) { var file = e.target.files[0]; console.log('文件全路径：', file.path); }); ``` 然而，由于安全原因，现代浏览器并不会暴露文件的全路径。所以，`file.path`可能返回的是空字符串或者一个沙箱路径，而不是实际的系统路径。如果你只是需要对选定的文件进行操作，如读取或上传，你可以使用`FileReader` API或`FormData`对象，它们并不需要文件的全路径： ```javascript var reader = new FileReader(); reader.onload = function(e) { console.log('文件内容：', e.target.result); }; reader.readAsText(file); // 对文本文件进行读取，可以替换为readAsDataURL等其他方法 // 或者使用FormData上传 var formData = new FormData(); formData.append('file', file); fetch('your-upload-url', { method: 'POST', body: formData }); ``` 至于`自动弹出窗口(css+div)`，这通常指的是利用CSS和JS创建一个自定义的弹出窗口样式，而非浏览器内置的`window.alert()`等方法。我们可以用CSS定义一个模态框的样式，然后通过JS控制其显示和隐藏。例如： ```css .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } ``` 在JS中，我们可以这样控制模态框的显示和关闭： ```javascript function openModal() { document.getElementById('myModal').style.display = 'block'; } function closeModal() { document.getElementById('myModal').style.display = 'none'; } ``` 利用JavaScript和HTML，我们可以创建自定义的弹出窗口来获取用户上传的文件，但要注意，出于安全考虑，我们无法直接获取文件的全路径，而是需要通过其他API来操作文件。在实际应用中，这些技术可以结合使用，以提供更丰富的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

自动弹出窗口(css+div) 1.zip （3个子文件）

获取上传文件全路径.html 2KB

自动弹出窗口(css+div)2.html 2KB

自动弹出窗口(css+div) 1.html 4KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DIVCSS5可拖动DIV提示窗口</title> <script language="javascript"> function alertWin(title, msg, w, h){ var content = "<br/><br/><input type='file' name='file' id='file' value='浏览'/>"; content += "<br/><p align='left'>     <font color='red'>*</font>注意文件格式应为.xls</p>"; content += "<input type='submit' value='提交'/>"; msg = content; var titleheight = "22px"; // 提示窗口标题高度 var bordercolor = "#666699"; // 提示窗口的边框颜色 var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色 var titlebgcolor = "#666699"; // 提示窗口的标题背景色 var bgcolor = "#FFFFFF"; // 提示内容的背景色 var iWidth = document.documentElement.clientWidth; var iHeight = document.documentElement.clientHeight; var bgObj = document.createElement("div"); bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; document.body.appendChild(bgObj); var msgObj=document.createElement("div"); msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;"; document.body.appendChild(msgObj); var table = document.createElement("table"); //www.divcss5.com divcss5 msgObj.appendChild(table); table.style.cssText = "margin:0px;border:0px;padding:0px;"; table.cellSpacing = 0; var tr = table.insertRow(-1); var titleBar = tr.insertCell(-1); titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor; titleBar.style.paddingLeft = "10px"; titleBar.innerHTML = title; var moveX = 0; var moveY = 0; var moveTop = 0; var moveLeft = 0; var moveable = false; var docMouseMoveEvent = document.onmousemove; //www.divcss5.com divcss5 var docMouseUpEvent = document.onmouseup; titleBar.onmousedown = function() { var evt = getEvent(); moveable = true; moveX = evt.clientX; moveY = evt.clientY; moveTop = parseInt(msgObj.style.top); moveLeft = parseInt(msgObj.style.left); document.onmousemove = function() { if (moveable) { var evt = getEvent(); var x = moveLeft + evt.clientX - moveX; //www.divcss5.com divcss5 var y = moveTop + evt.clientY - moveY; if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) { msgObj.style.left = x + "px"; msgObj.style.top = y + "px"; } } }; document.onmouseup = function () { if (moveable) { document.onmousemove = docMouseMoveEvent; //www.divcss5.com divcss5 document.onmouseup = docMouseUpEvent; moveable = false; moveX = 0; moveY = 0; moveTop = 0; moveLeft = 0; } }; } var closeBtn = tr.insertCell(-1); closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor; closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>"; //关闭窗口 closeBtn.onclick = function(){ document.body.removeChild(bgObj); document.body.removeChild(msgObj); } var msgBox = table.insertRow(-1).insertCell(-1); msgBox.style.cssText = "font:10pt '宋体';"; msgBox.colSpan = 2; msgBox.innerHTML = msg; // 获得事件Event对象，用于兼容IE和FireFox function getEvent() { return window.event || arguments.callee.caller.arguments[0]; } } </script> </head> <body> <input type="button" value="DIVCSS5" onclick="alertWin('批量添加校友信息','内容',300,200);" /> </body> </html>

评论收藏

内容反馈

版权申诉