получить объект файла из окна JavaScript - PullRequest
Новая
       14

получить объект файла из окна JavaScript

0 голосов
/ 09 сентября 2018

Я пытаюсь открыть окно и обработать файл в вызывающем JavaScript. Я могу передать имя файла, используя localStorage, но если я верну файл, я не смогу понять его правильно. Я не могу использовать это решение из-за ограничений системы, из которой я вызываю JavaScript: 

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>

1 Ответ

0 голосов
/ 09 сентября 2018

Прежде всего, добро пожаловать в SO. Если я вас правильно понял, вы хотите загрузить файл в новом окне и получить этот файл, используя localStorage, на свою главную страницу. Это возможное решение. Однако, пожалуйста, обратите внимание, что максимальный размер localStorage может варьироваться в зависимости от агента пользователя (более подробная информация здесь ). Поэтому не рекомендуется использовать этот метод. Если вы действительно хотите это сделать, посмотрите на первый фрагмент кода. 

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>

Однако, почему бы не использовать более элегантное решение: Просто используя модальный . Когда входное значение изменяется, вы можете просто закрыть модальное и получить значение файла без всех хлопот 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>

Надеюсь, это поможет! Дайте мне знать!

Ура!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...