Объедините изображение и данные в форме 1 html

Хорошо, это то, что я пытаюсь сделать. Я создаю веб-приложение, которое захватывает изображение и отображает его на странице iframe. i также в другой форме данных захвата (мы будем использовать (имя и фамилия) в качестве примера, но есть больше полей, которые заполняются при заполнении приложения. В конце приложения, которое я знаю, есть форма, которая захватила все данные и форма, которая захватила изображение. Мой вопрос: как я извлекаю изображение формы и размещаю его в форме данных. В качестве переменной javascript (ex.myvalue3) это то, что я смог придумать, просто был смущен тем, как прикрепить обе формы вместеОбъедините изображение и данные в форме 1 html

Форма № 1ImageCapture

<form action="../uploadimage.php" method="post" enctype="multipart/form-data" target="my_iframe"> 
<img src="" id="image"> 
<input type="file" input id="input" name="image" onchange="handleFiles()" style="display: none;"/> 
</form> 
<iframe name="my_iframe" src="" id="my_iframe"></iframe>

Javascript для захвата

var img = document.getElementById("image"); 
var width = 400; 
function handleFiles() { 
var filesToUpload = document.getElementById('input').files; 
var file = filesToUpload[0]; 

// Create a file reader 
var reader = new FileReader(); 
// Set the image once loaded into file reader 
reader.onload = function(e) { 
    img.onload = function() { 
    if (this.naturalWidth > width) { 
     this.width = width; 
    } 
    } 
    img.src = e.target.result; 
} 
reader.readAsDataURL(file); 

} 

</script>

Форма № 2DataCapture

<form name="myForm" id="myForm" action="../uploaddata.php" method="POST" target="hidden-form"> 
<input type="text" name="Firstname" value="%%%myvalue1%%%"/> 
<input type="text" name="Lastname" value="%%%myvalue2%%%"/> 
</form>

источник

2016-09-11 INOH

Существуют две формы в разных? Не можете ли вы использовать только одну форму? – Endless

Да есть в 2 разных кадрах. – INOH

Передача файлов & сгустки через iframe - это возможная и иногда сложная задача в зависимости от происхождения iframes. Если у родителя есть доступ к окну childs с javascript, вы получаете get the file inputs reference from parent. В противном случае вам нужно использовать postMessage, и firefox может быть более ограниченным при передаче крестообразного происхождения blob, но есть способы обойти его.

Теперь другая проблема заключается в том, что вы можете изменить форму и вставить входы и изменить значение - вход файла остается только для чтения, поэтому вы не можете взять файл из 1ImageCapture и вставить его в 2DataCapture или любую другую форму для этого. ,
Вы можете перенести my comment в w3c github, чтобы сказать, что хотите эту функцию.

Вы можете сделать это наоборот и взять все входы и вставить их в форму с помощью imageCapture.
Другой вариант заключается в использовании FormData и создать собственную форму и загрузить их с помощью AJAX

источник

2016-09-11 19:33:47 Endless

, что я сделал, что, похоже, работает, это то, что оригинальный iframe, который захватывает изображение. Теперь я добавил к форме captureData. То, что я сделал, - это скрыть форму, и когда i CaptureImage изображение захвачено, я показываю в скрытом iframe. если вам нужно больше объяснять, я опубликую код о том, как я это сделал, так как я понимаю из вашего сообщения, вы не можете легко переносить файлы и размещать их в другой форме. – INOH

Перенос файлов всегда можно сделать. Это добавляет их в другую сложную форму. Для этого вам нужно использовать FormData – Endless

Не ответ, который вы ищете, но вот небольшой совет, чтобы уменьшить код ... base64 просто непрактично

var img = document.getElementById("image"); 
img.style.maxWidth = 400 

function handleFiles() { 
    var fileInput = document.getElementById('input'); 
    var file = fileInput.files[0]; 
    // use createObjectURL instead of reading the file 
    img.src = URL.createObjectURL(file); 
}

источник

2016-09-11 19:03:21 Endless

спасибо, я попробую – INOH

Объедините изображение и данные в форме 1 html

ответ

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