I can get the file name from file upload to the textarea in IE and Chrome.
But it not work on firefox, how can i solve this problem?
Many Thanks.
function takeName(event) {
let filename = event.path[0].files[0].name;
document.getElementById("txtComment").value = filename;
}
<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
Get upload filename to textarea:
<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" onchange="takeName(event)" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>
</form>
document.getElementById() compatibility with any browser is unquestionable that isn't the problem. See this answer about .path compatibility with Firefox.
Replace event.path[0] with event.target.
function takeName(event) {
let filename = event.target.files[0].name;
document.getElementById("txtComment").value = filename;
}
<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
Get upload filename to textarea:
<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" onchange="takeName(event)" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>
</form>
When I use in firefox that show event.path is undefined, I suggest you use event.target.files to get file name
Related
var selectedfile;
function upload()
{
selectedfile= document.getElementById("file");
var filename=selectedfile.files.item(0).name;
var storageRef=firebase.storage().ref('/Images/'+filename);
var uploadTask=storageRef.put(selectedfile);
uploadTask.on('state_changed',function(snapshot){},function(errors){},
function(){
var downloadUrl=uploadTask.snapshot.downloadUrl;
console.log(downloadUrl);
});
}
<input type="file" name="fileid" id="file">
<button onclick="upload();" id="selbt">Upload</button>
While I am trying to upload images to my Firebase Storage it threw my some uncaught exception like:
It is saying invalid argument as 'put'. Can anyone please help in solving this issue.
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
</div>
<div>
<button>Submit</button>
</div>
</form>
Try
var filename=selectedfile.files[0].name;
I have a form to upload image with:
<div class="col-sm-4">
<input id="file_input" type="file" style="visibility: hidden; width: 0; height: 0" name="image[photo_new]" accept="image/*">
</div>
<div class="col-lg-8">
<div class="form-group row">
<label class="col-sm-3 control-label" for="title">
<label for="image_title">Title</label>
</label>
<div class="col-sm-9">
<input id="title" class="form-control" type="text" placeholder="Title" name="image[title]" maxlength="200">
</div>
</div>
</div>
I want when users click to #input_file area to choose image, then the after choosing file, the file name will display immediately in #title field. For example name.png should be name. I want to use JQuery to do this function but don't know how, any advises? Thank in advance.
You can use this.value to get the file value in a change event handler and then extract the name like
$('#file_input').change(function() {
//$('#title').val(this.value ? this.value.match(/([\w-_]+)(?=\.)/)[0] : '');
$('#title').val(this.files && this.files.length ? this.files[0].name.split('.')[0] : '');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file_input" type="file" />
<input id="title" />
You can attach an event after the user chooses an image like this:
$(document).ready(function() {
$('#image').on('change', function(event) {
// and you can get the name of the image like this:
console.log(event.target.files[0].name);
});
});
If the html is like this:
<input type="file" id="image">
Use this sample code to show file name :
<input type="file" name="file" id="file" />
<button id="btn">Submit</button>
<div id="fname"></div>
$(function(){
$('#btn').on('click',function(){
var name = $('#file').val().split('\\').pop();
name=name.split('.')[0];
$('#fname').html(name);
});
})();
Here is Demo on jsfiddle
You can have name, size and type details of selected file using below code. have a look.
<form enctype="multipart/form-data">
<input id="file" type="file" />
<input type="submit" value="Upload" />
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#file').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
//your validation
});
</script>
I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. Below is my code but can not get any link which explain how to do it for newbies. Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server.
<html>
<head>
<script type="text/javascript">
(function alertFilename()
{
var thefile = document.getElementById('thefile');
//here some action to write the filename in the input text
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
</body>
</html>
Here is a fully working example
JavaScript:
var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("some_text").value = filename[filename.length-1];
};
HTML:
<form>
<input type="file" id="fileInput" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
jsFiddle live example
Hope you find it helpful, Asaf
For the newcomers:
document.getElementById("thefile").onchange = function() {
document.getElementById("some_text").value = this.files[0].name;
};
/* BELOW FULLPATH VERSION (depending on browser)
document.getElementById("thefile").onchange = function () {
document.getElementById("some_text").value = this.value;
};*/
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br>
<br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
Just take the file input' value, split it and take the last index:
Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name
(Sorry that cant format my answer. I answered by a smartphone)
I'm pretty new to jQuery and I'm trying to make simple HTML upload page and I want to add new file input to form after selecting some file. I've tried this code
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form></body>
<script>
$('#upload').delegate('input[type=file]', 'change', function(){
alert('Alert');
addField();
});
</script>
and this addField() function
function addField(){
$('<input type="file" name="files[]" id="file" /><br />').insertAfter('#file');
};
But if I run this code, the 3rd input field is inserted after the 1st one instead of after the last field. Is it possible to add input fields after the last file input without using unique ids for these inputs? http://jsfiddle.net/aHrTd/
Thanks for any help.
How about this - (find last input:file in form and insert new input after it)
function addField(){
$('form input:file').last().after($('<input type="file" name="files[]" class="file" /><br />'));
}
Here is a solution: http://jsfiddle.net/aHrTd/4/
Adds a unique name and id to the new file inputs and inserts after last file input as pXL has suggested.
Note that I have used one of the most under-utilized jQuery abilities, though it easy to find (http://api.jquery.com/jQuery/) can build a new element for you in a nice clean way.
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form>
<script>
function addField(){
var lastfile = $('form input:file').last();
var countfile = ($('form input:file').length)+1;
$( "<input/>", {
"type": "file",
"name": "file_"+countfile,
"id": "file_"+countfile
}).insertAfter(lastfile);
fileinputmonitor();
}
function fileinputmonitor(){
$('input[type="file"]').change(function(){
alert('Alert');
addField();
});
}
fileinputmonitor();
</script>
Your inputs have to have unique ids. Give them a unique id and it should work fine.
You can use .last()
HTML
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" class='dynamic-file' /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
JS
function addField(){
$('<input type="file" name="files[]" class="dynamic-file" /><br />').insertAfter($('.dynamic-file').last());
};
The iframe is on the same domain, I tried the following code, but none of it worked:
myframe.document.getElementById("myform").submit();
parent.top.frames[0].document.forms[0].submit();
myframe.document.getElementById("myform").submit();
MyIFrame = document.getElementById("myframe");
myIFrame.getElementById("myform").submit();
Update:
This is the HTML:
<html>
<body>
<iframe frameborder="0" scrolling="no" width="530" height="298"
src="/iframe.php" name="myframe" id="myframe">
<p>iframes are not supported by your browser.</p>
</iframe><br />
<form action="/styles.css" method="post" id="form1">
<input type="text" name="input1" value=""/>
<input type="text" name="input2" value=""/>
<input type="button" value="test" onclick="submitFrame()">
<input type="submit" value="submit">
</form>
<script>
function submitFrame(){
var MyIFrame = document.getElementById("myframe");
var MyIFrameDoc = (MyIFrame.contentWindow || MyIFrame.contentDocument);
if (MyIFrameDoc.document) MyIFrameDoc = MyIFrameDoc.document;
MyIFrameDoc.getElementById("myform").submit(); // ## error
}
</script>
</body>
</html>
iframe.php:
<form method="post" class="af-form-wrapper" id="myform" name="myform" action="/" >
<input type="text" name="input1" value="2073809442" />
<input type="text" name="input2" value="1" />
<input type="submit" name="submit" value="submit" />
</form>
Firebug says:
MyIFrameDoc.getElementById("myform").submit is not a function
Try this:
var MyIFrame = document.getElementById("myframe");
var MyIFrameDoc = (MyIFrame.contentWindow || MyIFrame.contentDocument);
if (MyIFrameDoc.document) MyIFrameDoc = MyIFrameDoc.document;
MyIFrameDoc.getElementById("myform").submit();
UPDATE
I can't figure out why this doesn't work, but here is something that does:
MyIFrameDoc.getElementById("mybutton").click();
iframe.php:
<input type="submit" name="submit" value="submit" id="mybutton" />
UPDATE 2
The reason you're getting the submit is not a function error is because you've named your submit button submit, so MyIFrameDoc.getElementById("myform").submit actually references an HTMLInputElement, not the HTMLFormElement.submit() method.
All you need to do is rename your submit button, e.g.:
<input type="submit" name="submit2" value="submit" />
Submit the Iframe's URL from javascript
if (window.parent.$("#IframeId").length > 0) {
window.parent.$("#IframeId")[0].contentDocument.forms[0].submit();
}
You do not need to post into iframe. You can use normal blank "visible" window. Define your form like this:
var request = document.createElement("FORM")
request.id = "request"
request.name = "request"
request.action = "callYour.php"
request.method = "POST"
request.target = "_blank"
and in your php, when you are done just close the window by:
window.close();
within the HTML part, or within embedded script tags. The new window temporarily opens up but closeses itself when it is completed.