Question

我正在尝试打开一个窗口并在调用JavaScript中处理文件。我可以使用localStorage传递文件名，但是如果返回文件，我将无法正确获取文件名。由于系统调用的限制，我无法使用此解决方案：

var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();

可以使用localStorage传递文件对象，还是应该使用其他方法？我的代码是：

<!DOCTYPE html>
<html>
<script language="JavaScript">
function testInjectScript2(){
try {
    var myhtmltext =
    '<input type="file" id="uploadInput3" name=\"files[]" onchange=\'localStorage.setItem("myfile",document.getElementById("uploadInput3").files[0]);\' multiple />';
    console.log("myhtmltext="+myhtmltext);
    var newWin2 = window.open('',"_blank", "location=200,status=1,scrollbars=1, width=500,height=200");
    newWin2.document.body.innerHTML = myhtmltext;

newWin2.addEventListener("unload", function (e) {
   if(localStorage.getItem("myfile")) {
        var f = localStorage.getItem("myfile");
        alert ('in function.f='+f);
        alert ('in function.f.name='+(f).name);
        localStorage.removeItem("myfile");
    }                           
});
    } catch (err) {
                alert(err);
    }
}
</script>
<body>
    <input type="button" text="testInjectScript2" onclick="testInjectScript2()" value="testInjectScript2" />

</body>
</html>

Answer 1

首先，欢迎来到SO。如果您说对了，您想使用新窗口上传文件，然后使用localStorage将文件上传到主页。这是一个可能的解决方案。但是，也请注意，localStorage的最大大小可能会因用户代理而异（更多信息here）。因此，不建议使用此方法。如果您确实要执行此操作，请查看第一个片段。

var read = document.getElementById("read-value"), open_win = document.getElementById("open-win"), win, p = document.getElementById("file-set");

open_win.addEventListener("click", function(){
    win = window.open("", "", "width=200,height=100");
    win.document.write(
	'<input id="file-input" type="file"/>' +
	'<script>' +
		'var input = document.getElementById("file-input");' +
		'input.addEventListener("change", function(){window.localStorage.setItem("file", input.files[0]);})'+
	'<\/script>'
    );
})

read.addEventListener("click", function(){
  var file = window.localStorage.getItem("file");
  if(file){
    p.innerText = "file is set";
  }else{
    p.innerText = "file is not set";
  }
})

<button id="open-win">Open window</button>

<br><br>
<!-- Check if file is set in localStorage -->
<button id="read-value">Check</button>

<p id="file-set" style="margin: 10px 0; font-family: monospace"></p>

<i style="display: block; margin-top: 20px">Note: This only works locally as SO snippets lack the 'allow same origin' flag. i.e. just copy the html and js into a local file to use it.</i>

但是，为什么不使用更优雅的解决方案：只需使用modal。当输入值更改时，您可以简单地关闭模式并获得文件值，而不必担心localStorage的所有麻烦。

// Get the modal, open button and close button
var modal = document.getElementById('modal'),
    btn = document.getElementById("open-modal"),
    span = document.getElementById("close"),
    input = document.getElementById("file-input"),
    label = document.getElementById("input-label"), file;

// When the user clicks the button, open the modal 
btn.addEventListener("click", function() {
    modal.style.display = "block";
})

// When the user clicks on <span> (x), close the modal
span.addEventListener("click", function() {
    modal.style.display = "none";
})

input.addEventListener("change", function(){
  file = input.files[0];
  modal.style.display = "none";
  
  //Change value of the label for nice styling ;)
  label.innerHTML = input.files[0].name;
  
  //do something with your value
  
})

// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
})

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal h2 {
    font-family: sans-serif;
    font-weight: normal;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


/* Input styles, added bonus */

.file-input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.file-input + label {
    font-size: 1.25em;
    font-weight: 700;
    padding: 10px 20px;
    border: 1px solid #888;
    display: inline-block;
    cursor: pointer;
    font-family: sans-serif;
}

.file-input:focus + label,
.file-input + label:hover {
    background-color: #f7f7f7;
}

<!-- Trigger/Open The Modal -->
<button id="open-modal">Open Modal</button>

<!-- The Modal -->
<div id="modal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span id="close" class="close">&times;</span>
    <h2><i>Upload a file?</i></h3>
    <input id="file-input" name="file-input" class="file-input" type="file"/>
    <label id="input-label" for="file-input">Upload a file</label>
  </div>

</div>

希望有帮助！让我知道！

干杯！

从调用的窗口javascript

1 个答案: