Ok this is what i am trying to do. I am creating a web app, that captures an image and displays in iframe of page. i also in another form capture data (we will use (firstname and lastname) as example but there is more fields that are filled in while completing application. at the end of the app i know have a form that has captured all the data and a form that has captured the image. my question is how do i extract the form image and place within the data form. as a javascript variable (ex.myvalue3) this is what i have been able to come up with, just been confused on how to attach both forms together
Form#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 To Capture
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>
Form#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>
Transferring files & blobs through iframe is possible and sometimes complicated task depending on iframes origin. If parent have access to the childs window with javascript then you are get get the file inputs reference from parent. Otherwise you need to use postMessage and firefox can are more restricted on transferring a blob cross origin but there are ways around it.
Now the other problem is while you can modify a form and insert inputs and change the value - the file input remains read only so you can not take the file from 1ImageCapture and insert it to 2DataCapture or any other form for that mather.
You can upvote my comment in w3c github to say that you want this feature.
You can do it the other way around and take all inputs and insert them to form with imageCapture.
The other option is to use FormData and create a own form and upload them with ajax
Not the answer you are looking for but here is a little tip to reduce the code... base64 is just impractical
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);
}
Related
my question is how to display the selected file image from the input file in img tag, I have described the code below.
<img src="" width="200" height="100">
<input type="file" name="logo" id="upload-logo" />
$('#upload-logo').on('change', function(){
let logo = $(this).val();
$('img').attr('src', logo);
});
but the result I got after changing the src attribute is: Not allowed to load local resource: file: /// C: /fakepath/Capture.PNG, and photos are not displayed
I do not want to use ajax
You must use the file reader to validate and allow preview of the uploaded image. the browser disallows the access to local system files for good reason and the file inputs place files in a temporary folder system that the browser is allowed to access.
Here is an example of how to use the File Reader Source
const reader = new FileReader();
reader.onload = function(e) {
// do something with the result
var file = reader.result || e.target.result;
}
reader.readAsDataURL(input.files[0]);
In an MVC application, I'm having users upload a file and then doing some error handling. This portion works fine.
The file input is:
<div class="col-md-3" id="browsebutton">
<label class="btn btn-primary btn-file">
Browse<input type="file" id="FileUpload" name="FileUpload" class="" />
</label></div>
I want to display the file name as soon as a user chooses it, so I added this bit of JavaScript and an onChange="getFileName():
function getFileName() {
str = document.getElementById("FileUpload").value;
var filename = str.substring(12, str.length);
document.getElementById("browsebutton").innerHTML += filename;
}
var coll = document.getElementsByClassName("collapsible");
var i;
This properly displays the filename. However, as soon as I add this, the FileUpload becomes null in my controller.
How is this JavaScript interfering with my file upload?
Replace this line:
document.getElementById("browsebutton").innerHTML += filename;
With:
var fnSpan = document.createElement("span");
fnSpan.innerText = filename;
document.getElementById("browsebutton").appendChild(fnSpan);
The way you're doing it, you're setting the contents of the innerHtml, which ends up clearing the input (the input's value isn't part of the innerHtml string). Use DOM manipulation methods instead.
You can also make the span a permanent part of the DOM, and simply set its innerText in your code.
I'm having the user select an image and I want to change the one shown on the fly without having to rely on server-side scripts like PHP?
Basically, I have an HTML that has something like the following:
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="http://path/to/some/image.jpg" />
Then on the jQuery side I have the following:
$('#file').change(function(e){
alert($(this).val());
});
I was hoping to replace the imagedisplay's src with the one the user selects referenced locally to their system but $(this).val() only displays the file name so I won't be able to reference it as the source.
You can use FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
Its method FileReader.readAsDataURL()
The readAsDataURL method is used to read the contents of the specified Blob or File.
Note: It works in Modern browsers
$(document).ready(function() {
$('#file').change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagedisplay').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="" />
I'm having the user select an image and I want to change the one shown on the fly without having to rely on server-side scripts like PHP?
Basically, I have an HTML that has something like the following:
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="http://path/to/some/image.jpg" />
Then on the jQuery side I have the following:
$('#file').change(function(e){
alert($(this).val());
});
I was hoping to replace the imagedisplay's src with the one the user selects referenced locally to their system but $(this).val() only displays the file name so I won't be able to reference it as the source.
You can use FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
Its method FileReader.readAsDataURL()
The readAsDataURL method is used to read the contents of the specified Blob or File.
Note: It works in Modern browsers
$(document).ready(function() {
$('#file').change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagedisplay').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="" />
I am working on a site where there is a feature for users to be able to sign directly on the webpage using a canvas free form pen tool. When users click the 'apply signature' button the signature that the user drew is converted into an image and saved on the page as an <img src=""> (as you can see in the code below). Up until this point everything works great.
The problem is, When the user submits the form, I am trying to get the newly created canvas image to submit with it as a post variable and render on the process.php page as the signature that was signed. It appears that image (toDataURL()) gets passed as a post variable, but for some reason it does not render on the process.php page. It appears like the image source is not found.
I am new to javascript and I have been trying to fix this problem for days now, I would appreciate any help with fixing this. Many thanks in advance!
Markup
<div class="signature-field">
Sign:
<span class="sketch-container">
<canvas id="simple_sketch" width="350" height="100"></canvas>
</span>
Date: <input name="signature-date" type="text"><br/>
<div class="signature-buttons">
<span class="save-signature">Apply Signature | </span>
<span class="reset-canvas">| Reset Signature</span><br/>
</div>
</div>
<form method="post" action="process.php">
<input type="text" name="fname">
<input id="signature" name="signature" type="hidden">
<input type="submit">
</form>
JavaScript
$(function () {
var sktch = $('#simple_sketch').sketch();
var cleanCanvas = $('#simple_sketch')[0];
$('.save-signature').click(function () {
/* replace canvas with image */
var canvas = document.getElementById("simple_sketch");
var img = canvas.toDataURL("image/png");
$('#simple_sketch').replaceWith('<img src="' + img + '"/>');
$('.signature-buttons').replaceWith('');
document.getElementById("signature").value = $('.sketch-container').html();
});
});
I'm not quite sure what you're doing here, but if you want to post the image data through the hidden signature field, simply do this:
document.getElementById("signature").value = document.getElementById("simple_sketch").toDataURL("image/png");
As right now, it looks like you're posting the image data including <img> tags ("<img src="<DataUrl>"/>")
How about your server-side code, is the img param output empty? Are you sure the img data is being sent through the request? Try some packet sniffing tool like Fiddler or Wireshark and analyze the contents of the request (You can also take a quick look with Firebug).
Perhaps you could try some other approach to convert the img data:
https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas