<input title="Browse" type="file" name="file" onchange="this.parentNode.nextSibling.value = this.value.split('\\').pop().split('/').pop()">
Browse
From the above code i am uploading file and uploaded file is working fine but when i click upload button the current browsed file name is not getting displayed in the text box which i provided.
Since you'll display the file-name in a separate text-box and you won't use the default filename display. It's better to create a button and have it call the file-upload using onclick. After that you can get the file-name and assign it to the text-box you created using the javascript below.
javascript:
var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("fileText").value = filename[filename.length-1];
};
HTML:
<label for="file" class="input input-file">
<input type="text" id="fileText" placeholder="Upload Students file" readonly="" />
<input type="file" id="fileInput" style="display: none;" />
<input type="button" value="Choose File" onclick="document.getElementById('fileInput').click();" />
</label>
I've made a quick demo for you here: http://jsfiddle.net/x9L8etfg/
Hope this helps.
you have to parse to the parent of text node, then only you can set the value.
use this:
onchange="this.parentNode.parentNode.childNodes[1].value = this.value.split('\\').pop().split('/').pop()"
Related
I searched internet and I could not find a solution for the problem. I have a form and when I submit only text fields there is no problem. But when I add file input and submit the form I get undefined index error.
HTML CODE
<form method="post" action="add.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="10485760">
<input type="text" name="topic" style="width:300px;" value="cars" />
<input type="file" name="file1" id="file1" />
<input type="submit" name="submit" value="Add"/>
</form>
PHP CODE
if(isset($_POST['submit']))
{
// Form
}
else echo'NOOO';
This code always give NOOO when uploading file. I have controlled php.ini and upload is on.
Not every Browser sends the Submit button Value
you should check for your real Input values
if(isset($_POST['topic']))
{
// Form
}
else echo'NOOO';
if you want to check if your File is attched
use
$_FILE['file1']
instead of $_POST
I have a Form with some fields:
<form action="xyz.php" method="post" enctype="multipart/form-data">
<input type="text" placeholder="First name" name="firstname">
...
<input type="file" name="logo">
...
<input type="submit" name="submit">
</form>
The image should be uploaded immediately to img_upload.php. In this file i need the $_FILES array.
My img_upload.php script uploads the image, do some things with the image (resize, ...) and give me the URL to the image. After this, the image should be displayed in the form.
Is there any chance to upload the image (send $_FILES array to another file) without submiting the whole form?
<input type="file" name="logo" onchange="uploadThisFile(this)" >
function uploadThisFile(file) {
/* launch an ajax request to img_upload.php and pass file details via POST */
}
I am using the following script to add image input fields to my webpage. Everything is working fine, but what if I want to do the validation. I dont want to submit the form if any of the fields are empty. I tried the code i.e function validate() but it only checks for the first input field, i.e the input field of html. It doesnot work for the input fields added in runtime with the help of Jquery.
<script type="text/javascript">
function validate () {
var file = document.getElementById('file').value;
if(file==""){
alert("None of the Image Fields can be empty!!");
return false;
}
}
$(document).ready(function(){
$('#addproduct').click(function(){
$(this).after('<br /><input type="file" name="image_name[]" class="addfile" id="file" /> <input type="text" name="image_caption[]" placeholder="Caption for this image " size="60" /> ');
});
});
</script>
And I would like to add the delete functionality for the image fields. Like a cross button beside every input field, and the field be removed when clicked on that button.
<input type="file" name="image_name[]" id="file" required="true">
<input type="text" name="image_caption[]" placeholder="Caption for this image " size="60">
<span id="addproduct"></span>
Instead of document.getElementById('file') use document.getElementsByName('image_name[]') or jQuery style $('[name="image_name[]"]'). This is because the id of a tag must be unique, else only the first one can be referenced by id.
For the delete functionality use something like this:
$(document).ready(function(){
$('#addproduct').click(function(){
$(this).after('<br /><div><input type="file" name="image_name[]" class="addfile" id="file" /> <input type="text" name="image_caption[]" placeholder="Caption for this image " size="60" /> <input type="button" value="Delete" onclick="deleteRow(this)" /> </div>');
});
});
var deleteRow = function(elem) {
$(elem).parent().remove();
}
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Reading a File's Metadata
i have this form where i am uploading mp3 files but i want users to upload music and all details like author,title etc of mp3 should automatically filled in form field.i am using php and want any php/javascript method which can find out the name of the file from local machine and put that name in my form title field
my form is given below. i dont want users to enter title,author etc
<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p><span class="form_label">Name of the song</span><input type="text" value="" name="title" style="width:400px" class="inputText required"></p><p><span class="form_label">Description</span>
<textarea class="rich" style="width:580px" rows="18" name="form_content"></textarea>
</p><p><span class="form_label">Tags</span>
<input type="text" value="" style="width:300px" name="tags" class="inputText">
<span>Multiple tags should be Separated with commas(,)</span>
</p>
<p><label>Upload</label><input type="file" name="song">
<span>Only mp3 is accepted</span></p>
<p><label>Music source</label>
<input type="radio" checked="1" value="own" name="musicsource">My own
<input type="radio" value="others" name="musicsource">From another musician
</p>
<div style="display:none" id="ms_others">
<p><label>Musician name</label><input name="musician"></p>
</div>
<div id="ms_own">
<p></p>
</div>
<p><label>Picture (Optional)</label><input type="file" name="picture">
<span>A picture about the song or the musician</span></p>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("input[value='own']").click(
function() {
$("#ms_others").hide();
$("#ms_own").fadeIn();
}
);
$("input[value='others']").click(
function() {
$("#ms_own").hide();
$("#ms_others").fadeIn();
}
);
})
</script><p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id"></form>
You will need to populate your MP3's details after the file is uploaded, unless they manually type in all information.
On the PHP side, you can install the following: PHP ID3
There are examples there on how to read ID3 tags from files.
I've created a HTML and PHP form to pretty much just input data into a MySQL table.
I've got a file upload field, but it doesn't upload a file. I don't want it to upload anything to the server, all I want is for it to grab the location of the file selected and input that into the database.
It works perfectly fine on Internet Explorer, but doesn't work on any other browser, I assume it's because of security issues it imposes.
My input code:
<input type="file" id="filename" name="filename" />
And of course when the form is submitted some PHP code runs through to insert the data into the database. I've tried JavaScript to copy value of that field to to another field but again because of security issues that doesn't work.
Does anyone know of a way I can do this in JavaScript? Or even Flash? To be honest, anything similar to these would do, just something that works in browsers other than IE.
Thanks.
EDIT -
Here's my code:
<?php
if (isset($_POST['submit'])) {
$name = addslashes(htmlentities($_POST['name']));
$filename = addslashes(htmlentities($_POST['filename']));
if (#mysql_query("INSERT INTO movies SET
name='$name',
doc_filename='$filename'")) {
echo '<p>Movie added.</p><p>Manage movies.</p>';
} else {
echo '<strong>Error:</strong> '.mysql_error().'';
}
} else {
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="newspost" enctype="multipart/form-data">
<div class="form-row">
<label for="fm_title">Movie file path: </label><br />
<input type="file" id="filename" name="filename" />
</div><br />
<div class="form-row">
<label for="fm_title">Movie name: </label><br />
<input type="text" class="input-width" name="name" value="<?php if (!empty($_POST['name'])) { echo $_POST['name']; } ?>" />
</div>
<div class="form-row">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
<?php
}
?>
all I want is for it to grab the location of the file selected and input that into the database.
This is no longer possible using HTML - for security reasons, the location of the selected file is not accessible in the file input's DOM element anymore. Most browsers use C:\Fakepath\ instead.
You might be able to get hold of this information using a Flash or Java based uploader (edit: see e.g. this page in the AS3 manual) SWFUpload's API could be worth a look. It could be that you need to build your own Flash or Java solution for this, though.
how you are posting the data of the form? I am not able to see any way of form post. No Submit button or onclick or onchange event of javascript? and also how you suppose this line to give output
<input type="text" class="input-width" name="name" value="<?php if (!empty($_POST['name'])) { echo $_POST['name']; } ?>" />
as its already in else part of the line
if (isset($_POST['submit']))