2015-06-17 7 views
0

Я пытаюсь реализовать кнопку загрузки файла, где, как только файл выбран, пользователь перенаправляется на другую страницу с формой для заполнения дополнительных данных перед отправкой ,Как передать входные данные = «файлы» между страницами

Возможно ли это? Чтобы передать входное значение на другую страницу? Я заметил, что «значение» элемента формы не является истинным значением (т. Е. С префиксом «C: \ fakepath \»), поэтому простая функция setValue() в форме, вероятно, не будет работать.

Если это имеет значение, я использую угловой и ui-router. И когда я говорю об изменении страницы, я действительно имею в виду состояние изменения.

+5

вы не можете. что позволяет любому пользователю указать путь для ЛЮБОГО файла в системе пользователя. например невероятно серьезная проблема безопасности. загрузите файл в одну форму, загрузите его в безопасное место в системе, а затем вытащите его, когда будет отправлена ​​вторая форма. –

+2

@MarcB. Поскольку OP работает в SPA, вы, вероятно, можете просто сохранить данные файла в службе при изменении ввода и затем извлечь из этой службы. (или это будет потеряно?) – tymeJV

+0

технически вы _could_, но вам нужно будет использовать iframe и использовать [window.postmessage] (https://developer.mozilla.org/en-US/docs/Web/API/Window/ postMessage), указав объект файла как [Transferable] (https://developer.mozilla.org/en-US/docs/Web/API/Transferable) –

ответ

1

Вы можете передать File объект из HTMLInputElement.files в качестве параметра состояния: $state.go('form', {'file': file}).

Я продемонстрировал это решение fiddle. Первое состояние запрашивает у пользователя выбор файла, а затем перенаправляет его во второе состояние, передавая файл в качестве параметра. В этом примере имя файла просто распечатывается, но вы также можете легко прочитать файл.

+0

Отлично.Спасибо, это самое простое решение. – kennyg

0

Попробуйте добавить форму как модальное всплывающее окно вместо:

$(function() { 
 
    $("#dialog").dialog({ 
 
     autoOpen: false, 
 
     show: { 
 
     effect: "blind", 
 
     duration: 1000 
 
     }, 
 
     hide: { 
 
     effect: "explode", 
 
     duration: 1000 
 
     } 
 
    }); 
 

 
    $("#file").change(function() { 
 
     $("#dialog").dialog("open"); 
 
    }); 
 
    });
<meta charset="utf-8"> 
 
<title>jQuery UI Dialog - Animation</title> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 

 
<div id="dialog" title="Basic dialog"> 
 
    <p>Put your form here, for example.</p> 
 
</div> 
 

 
<input type="file" id="file" />

Смежные вопросы