I am developing a chrome extension with an option page. On that page I put an upload image option but can't get the file to load in javascript. I have tried many solutions (1st solution, 2nd solution ...) but none worked. The strange thing is, that even an "onclick" attribute in the html code doesn't call the corresponding function. Here is an example of the code:
HTML example:
<input type="file" name="uploadImage" id="uploadImage" />
<button type="submit" id="imageUpload-btn" onclick="myFunction();">Upload</button>
javascript example:
jQuery("#imageUpload-btn").click(function(){
var image = new Image();
image.src = jQuery("#uploadImage").val();
alert(image.src);
image.onload = function(){
alert("on load");
}
image.onerror = function(){
alert("error");
}
});
I get the path of the file in the first alert, but then always the error alert. The function "myFunction()" is not called, but if I open the file directly in a browser the "onclick" trigger works and "myFunction()" is called.
What am I doing wrong or what am I missing?
<form name="Upload" action="#" enctype="multipart/form-data" method="post">
<p>Filename: <INPUT type="file" name="submitfile" id = "submitfile" />
<INPUT type="button" value="Send" onClick="checkSize();" />
</form>
here you are using enctype="multipart/form-data" in this type we dont have opertunity to use
im.src = document.getElementById('submitfile').value;
you need to go for apache.commons.fileupload ServletFileUpload.isMultipartContent(request); which is totally java related.
Related
I have a simple form on my webpage.
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input id="browse" type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
Now, my problem is when I browse and choose file to upload it shows which file I am going to upload.
But when I click on Choose file and browse again and this time if I change my mind mid way and hit cancel then old selected image also goes away.
On canceling it removes already selected image also.
Why does this happen and what to do if I want my old selected image to be selected after browsing again and canceling?
Thanks in advance!
Thanks to #Carlos , added this javascript
var input = document.getElementById("browse");
var selectedFile;
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay() {
if(input.files.length==0) {
input.files = selectedFile;
}
else {
selectedFile = input.files;
}
}
and now it works fine! you can check here.
I created a link https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137 To fill the input field CNPJ.
This is fine. However, I need to run the function preencheParametros('CNPJ') together above link.
So, I tried something like this https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')
And not worked. How handle this?
First Way: Not Worked
GET method
<form method="post" action="https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" name="nForm" id="nForm">
<div class="CInput" id="CCnpj">
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
</div>
</form>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137
Second Way: Not Worked
Read GET method in JS
Input values:
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
<input type="button" value="Get Input Values" id="retrieveInputValuesButton" />
<script>
var cnpj = document.getElementById("lCnpj");
var element = document.getElementById("retrieveInputValuesButton");
element.onclick = function() {
window.open("https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" + cnpj.value + "&exec=preencheParametros('CNPJ')");
};
</script>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')
I'm sorry, but there is no way to pass in executable instructions to a website like that (unless they specifically provide you a way to do so). That would be a huge security risk if anyone could just inject code.
You could however try cooking something up with a Greasemonkey script.
It's called Greasemonkey for Firefox, or Tapermonkey for Chrome
I need a javascript code that checks the input file size before uploading everytime the input value changes (i.e. everytime the user selects a file to upload).
So far I came up with this:
var file = document.getElementById("myFile");
file.addEventListener('change', function() {
if (this.files[0].size > 2*1024*1024) {
alert('Max file size is 2 MB');
file.removeAttribute('value');
file.parentNode.replaceChild(file.cloneNode(true),file);
}
}
);
and the HTML is:
<form action="?" method="post">
<input type="file" id="myFile" name="myFile" />
<input type="submit" value="upload" />
</form>
Now, if I leave the Javascript code like that, it doesn't work at all.
But if I change it like this
window.onload = function() {
// Same code above
}
it works, but only for the first file the user selects.
How can I change it to make it work everytime the user selects a file? (if possible without jQuery)
No need to clone the node etc ... just set the value to '';
file.value = '';
see working snippet
document.getElementById("myFile").addEventListener('change', function() {
if (this.files[0].size > 2*1024*1024) {
alert('Max file size is 2 MB');
this.value='';
}
});
<form action="?" method="post">
<input type="file" id="myFile" name="myFile" />
<input type="submit" value="upload" />
</form>
From the documentation for cloneNode:
Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using addEventListener()
You are deleting the element with the event handler on it and replacing it with one that doesn't have a change listener
You need to call addEventListener again (and store file.cloneNode(true), in a variable so you can call addEventListener on it and pass it to replaceChild).
I am trying to upload an image in html page using the <input type="file"> element. I want to use the uploaded image to replace another image on the page. However, the control does not pass onto the java script function. Am trying to find out why the control does not pass. Below is the code I am using:
<label>Upload a Picture</label
<img src="unknown_person.jpg" height="250" width="250"></img>
<div>
<form name="image1" enctype="multipart/form-data" action="/" method="POST" onsubmit="return UploadPic()">
<input type="file" name="imgfile"></input>
</form>
</div>
Thanks in advance.
You can't intercept a file upload in Java Script. The file has to be uploaded to the server, and then the page has to be rerendered
One approach would be using AJAX to query the backend on where the image was uploaded.
Like so
var pullImage = function()
{
// do ajax work
return image ? propagateHTML('element', image.uri) : fallback();
}
var propagateHTML = function(id, uri)
{
document.getElementById(id).innerHTML = uri;
}
How can I show only XML files in a file input element?
I read about the "accept" attribute but also learned no browser actually support it. I found here some JS scripts but they didn't work well :-\
(I'm checking this server side as well but would like to do it client side too)
Thanks
The answer is pretty simple, you use the MIME type. So if it is an xml file you want, you just do:
<input type="file" accept="text/xml" />
If you want to see the full list of MIME types, check this site http://www.iana.org/assignments/media-types/media-types.xhtml
Not sure if you can do that, but at least you could use a callback function and check the input value for the .xml extension.
Snippet:
<script type="text/javascript">
function isXml(input)
{
var value = input.value;
var res = value.substr(value.lastIndexOf('.')) == '.xml';
if (!res) {
input.value = "";
}
return res;
}
</script>
<form method="post" action="">
<input type="file" name="myfile" id="myfile" onchange="return isXml(this)" />
<input type="submit" />
</form>