My goal is to automatically upload an image to a folder when the file is selected. Following the answer on how do I auto-submit an upload form when a file is selected, I attempted to use Javascript's onchange event to automatically submit the form:
<?php
if(isset($_POST['upload']))
{
$ImageName = $_FILES['photo']['name'];
$fileElementName = 'photo';
$path = '../images/';
$location = $path . $_FILES['photo']['name'];
move_uploaded_file($_FILES['photo']['tmp_name'], $location);
}
?>
<form method="post" enctype="multipart/form-data">
<input type="file" name="photo" onchange="document.getElementById('upload').submit();" id="file" class="inputfile" />
<label for="file">Add Image</label>
<input type="submit" style="display: none;" name="upload" id="upload">
<input type="text">
<input type="submit">
</form>
When the file is selected, it's not automatically uploaded to a folder.
Note: I cannot use onchange="form.submit()" as I have multiple submit buttons in my form!
I think you could simply change it to:
document.getElementById('upload').click();
Or do something like this:
var button = document.getElementById('upload');
button.form.submit();
Related
The code below displays the path of the uploaded images. I am using a multi-step form with four image-uploading fields. The images upload, and it shows the full path in the preview page, but I want to display just the names with extensions of the images—not the full path. Please help me achieve that.
*Html form fields*
<p><input type="file" name="image" accept="image/*" id="id_post_image">
<input type="file" name="image2" accept="image/*" id="id_post_image2"></p>
<p>
<input type="file" name="image3" accept="image/*" id="id_post_image3">
<input type="file" name="image4" accept="image/*" id="id_post_image4"></p>
*preview form fields*
<div class="preview_img" id="review_Condition" name="review_Condition"></div>
<div class="preview_img" id="review_Condition2" name="review_Condition"></div>
<div class="preview_img" id="review_Condition3" name="review_Condition"></div>
<div class="preview_img" id="review_Condition4" name="review_Condition"></div>
*javascript image path display*
document.getElementById("review_Condition").innerHTML = document.getElementById("id_post_image").value;
document.getElementById("review_Condition2").innerHTML = document.getElementById("id_post_image2").value;
document.getElementById("review_Condition3").innerHTML = document.getElementById("id_post_image3").value;
document.getElementById("review_Condition4").innerHTML = document.getElementById("id_post_image4").value;
This pattern will do:
var filename = fullPath.replace(/^.*[\\\/]/, '')
Question duplicate and answer from :
How to get the file name from a full path using JavaScript?
I am using this form on my php file to create the form
<input type="text" name="OrderLNumber" id="OrderLNumber" >
<br>
<input type="submit" name="submit" value="Status">
</form>
after that I am trying to pre-fill the form OrderLNumber field from this URL:
status/2727?OrderLNumber=24206927
Page loads normally but field is not filled as I intend to. How can I make this work ?
You need to get the order number from the url by using the $_GET['OrderLNumber'] variable.
The code below will test to see if the form has been submitted. If the from has loaded fresh with no POST data it will grab the order number from the url. If the form has been submitted and there is POST data it will use whatever is in the form for the order id.
Like so:
<?php
if(isset($_POST['OrderLNumber']) && $_POST['OrderLNumber']){
$orderLNumber = $_POST['OrderLNumber'];
}else{
if(isset($_GET['OrderLNumber']) && $_GET['OrderLNumber']){
$orderLNumber = $_GET['OrderLNumber'];
}
}
?>
<form action="" method="POST">
<input type="text" name="OrderLNumber" id="OrderLNumber" value=" <?php echo $orderLNumber; ?> " ><br>
<input type="submit" name="submit" value="Status">
</form>
Hope this helps.
I have a PHP script to upload image on my form. It is functioning properly. I have 2 buttons, one to browse for the file (to be uploaded) and the other is a submit button that displays this image on the screen.
I want that on clicking Browse --> selecting file --> clicking OK, the file should get uploaded. Do not need the extra "submit" button.
I am just pasting a part of my code here, that represents these buttons.
<div class="upload_container">
<br clear="all" />
<div id='preview'></div>
<form id="image_upload_form" enctype="multipart/form-data" action="<?php
echo $_SERVER['PHP_SELF'];
?>" method="post" class="change-pic">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<input style="padding-left:20px; color:#4d4d4d" type="file" id="file" name="user_image" accept="image/*" />
<script type="text/javascript">
document.getElementById("file").onchange = function() {
document.getElementById("image_upload_form").submit();
};
</script>
</form>
</div>
</div>
You can use onchange function and then submit the form
<input style="padding-left:20px; color:#4d4d4d" type="file" id="file" name="user_image" accept="image/*" />
document.getElementById("file").onchange = function() {
document.getElementById("image_upload_form").submit();
};
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());
};
With this simple example
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
</form>
How can I hide the submit button until somthing's in the file field, I've tried to make a php script that look if the $_FILES['error'] == 4 or is_file_uploaded, etc and that don't work. So I want to simply hide the button until something is selected in the file field.
The answer could be in javascript, jQuery... I don't care :D
Thanks
The <input type="file"> element has a files property.
Simply check files.length.
jQuery example, which modifies the submit button on the fly:
// Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
var hasNoFiles = this.files.length == 0;
$(this).closest('form') /* Select the form element */
.find('input[type=submit]') /* Get the submit button */
.prop('disabled', hasNoFiles); /* Disable the button. */
});
Use this. Attach the code on the change event of the file field.
$(function() {
$("input:file").change(function() {
var fileName = $(this).val();
if(filename != "") { $("#submitButtonId").show(); } //show the button
});
});
The default state of the submit should be hidden (CSS display: none)
And on change event of the file field, you show that submit button
Her's the code
<script>
$(function() {
$("#myfileinput").change(function() {
if($(this)).val() != "") $("submit").show();
});
});
</script/>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input id="myfileinput" type="file" name="images[]" multiple="multiple">
<input type="submit" name="submitImgs" value="Upload" style="display:none"/>
</form>
<script>
function checkFile() {
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
if(size > 0) {
document.getElementById('submit').style.display='block';
}
}
</script>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" onChange="checkFile()" name="images[]" multiple="multiple"> <input type="submit" style="display:none;" name="submitImgs" value="Upload" id="submit" />
</form>