i have a form that with a link click adds a new for a file with jquery's .html()
// show div to change image on product_edit.php
$("#change_img").click(
function () {
$("#change_img_div").html('<label>Image product</label><input type="file" value="" name="item_img" id="item_img"/>').fadeIn('fast');
$(this).fadeOut('fast');
}
)
When I choose a file and I submit this name "item_img" is not present in the php $_POST array,
if I put type="text" instead the new input is passed to POST.
Basically seems like a "file" type is not recognized if this is not present in the html if the first place?
Files are sent as binary data and as per the HTML specification, it requires the <form> to be set with enctype="multipart/form-data" so that it can be mixed with text content (the normal request parameters). In the PHP side, they are available by the $_FILES array.
See also:
W3schools - PHP File Upload example
Tizag.com - PHP File Upload tutorial
A lot more PHP File Upload tutorials
Related
I want to know different between <form action="#" method="post"> and <form action="name of file" method="post">
I am always using # but don't know disadvantages.
Can you explain why I should use # or file name?
Thanks
form action = file name
It is used to send a request on the other page(i.e your file name) containing your form fields(inputs) with methods like GET and POST.
example my HTML page is having a form then and my PHP page is having all the backend code. Whatever I need to do with form inputs. I will give the file name of my PHP page in action. the action attribute of the form is used to send the form request to the destination we want to with methods like the POST and GET. If you do not want to send a request to another Page and want it to your default page. You can leave action ='' attribute of the form empty as I did.
An action of # indicates that the form stays on the same page, simply suffixing the URL with a #. A similar use occurs in anchors. Link for example, will stay on the same page.
Thus, the form is submitted to the same page, which then processes the data etc
The content of action allows you to know where you will put the code that will process the request.
If you put the name of a file it, then his file will process the request.
For example: you have your form on the index.php page and you want to put the PHP code of the form in a process.php file. You will put process.php in action (action="process.php").
If you do not put anything it is like sending the content of the request to the same file (index.php).
I am trying to upload a file a view the file on an iFrame but it is not working.
Here is what I have tried
jQuery('.file_upload1').change(function(){ jQuery('iframe').attr('src', jQuery(this).val()); $('iframe').attr('src', $('iframe').attr('src')); });
<label><input class="file_upload1" name="file_cover" type="file"></label>
<div>
<iframe src=""></iframe>
</div>
If this does not work, can I move the uploaded file to server directory so that the path becomes valid? How would I do this?
Apart from other problems and limitations of such solution, and specifically answering "why it does not work?" question:
The change event needs to be nested in ready function:
jQuery("document").ready(function() {
jQuery('.file_upload1').change(function() {
jQuery('iframe').attr('src', jQuery(this).val());
});
});
The src attribute of iframe must be a valid non-empty URL potentially surrounded by spaces. When selecting a file with input type file, in Windows the value will be something like c:\fakepath\file name goes.here, so before using as iframe source, you will have to rework it a little bit.
Regarding
I'm trying upload file and display it on iframe forcing it to reload
You don't need to force reload to achieve this. "Upload" means the page will be reloaded (well, unless upload is handled using AJAX, but it's not the case here I guess). In order to upload a file, the form must be submitted and the page needs to be reloaded. Once reloaded, you can easily construct the full path of the file and use it in iframe, something like:
<iframe src="<?php echo $file_full_url; ?>"></iframe>
But if you want to preview the file in iframe before uploading to server - it won't be possible due to security reasons. See this question for reference: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
i need to upload a file doc or pdf or rich text through jquery and smarty
i try to pass the file in jquery is given below
window.location.href= sitePath+'download?p='+$('#file').val();
but the p doesn't have value. how to get the file path or name and how can stored in server
in controller i write just pass the query to model is given below
$model=new download();
$id=$model->upload($param);
and i can't develop the model code....
please help me
You can't send files like that.
You should either submit a form with enctype="multipart/form-data" or use some AJAX uploader (which uses form submit to iframe and then stores a file using PHP script).
EDIT: Some references
http://www.w3schools.com/php/php_file_upload.asp - tutorial on how to upload a file using PHP
http://valums.com/ajax-upload/ - example of ajax uploader.
EDIT2: The problem is not with your model code but with the way you try to submit a file.
I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.
For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.
Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).
I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.
Thanks.
Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.
A very basic example:
NB. Not all browsers support this code.
[I think Chrome, Firefox and Opera do at time of writing.]
HTML:
<form>
<input type="file" name="thefile" id="thefile" />
</form>
<div id="text"></div>
JS (using jQuery):
$(document).ready(function() {
$('#thefile').change(function(e) {
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function(e) {
$('#text').text(e.target.result);
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
Demo: http://jsfiddle.net/FSc8y/2/
If the selected file was a CSV file, you could then process it directly in javascript.
.split() will be useful in that case to split lines and then fields.
the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 compliant.
something like this article may help:
http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that
is doesnt require any type of ajax libs and you can start using it
even if you never used ajax before.
So here it goes.
<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”text” name=”test” /> </form>
<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />
This is just a normal form but you’ll notice the target in the form
tag, this tells the form to submit in the iframe instead of the
current page.
It’s works exactly as the target attribut on the A tag.
Also the iframe is hidden from the user using
style=”width:0px;height:0px;border:0px;”
now the file formProcess.php is not different from your normal form
processing file but if you want do something on the main page you have
to use JS like that :
window.parent.whatEverYouWannaDoInParentForm();
You can also upload file with this method !
Please checkout the formphp for full example.
Cheers !
Nb : You will see the status bar acts like the page is reloading but
it’s really not.
Been scratching my head for too long on this: Using jquery.form, (http://malsup.com/jquery/form) with PHP ... my $_FILES['someimage'] gets set but the error number is always UPLOAD_ERR_NO_FILE, size is also 0.
The JavaScript:
$('form input[type=file]').change(function () {
$(this).clone().appendTo('#imgform');
$('#imgform').ajaxForm();
$('#imgform').ajaxSubmit({
type: 'POST'
});
});
Which appends to:
<form id="imgform" method="POST" action="/api/images.php" enctype="multipart/form-data"></form>
From another form which has bog-standard file inputs.
PHP logs are clean, but var_dumping $_FILES always shows that the index is set to the name of the form element ... but no data.
Thanks guys!
(Sorry, I know jQuery-like questions are too frequent round these parts).
EDIT
I found Clone a file input element in Javascript which contains further information and suggested alternatives.
What I decided to do is have a single form for non JavaScript browsers, and JavaScript/jQuery breaks the single form into three forms:
Head form -> File upload form -> tail form
Then I can post the file upload async, and when the tail's submit is clicked, glue the form together into a POST as they are just text fields.
Two things I see when I try to run this. Since you are cloning then appending, I wonder if your file input exists within the context of the form. If not, then $('form input[type=file]') will never find the element to be cloned.
Perhaps the biggest problem, though, is in the way browsers handle file upload controls. You cannot programmatically set a value on a file input control - otherwise it would be trivial as a web developer to automatically set the file upload value to "c:\Files\MyPasswordFile.txt" and automatically submit the form invisibly to the user.
When I changed your code to this:
<input type="file" name="imageFile" />
<form id="imgform" method="POST" action="/api/images.php" enctype="multipart/form-data">
</form>
<script>
$('input[type=file]').change(function() {
alert("ACTION");
$(this).clone().appendTo('#imgform');
//$('#imgform').ajaxForm();
//$('#imgform').ajaxSubmit(
// {
// type: 'POST'
// }
// );
});
</script>
I can see the behavior as above - the field is cloned and appended - but it has no value. Since part of the clone process involves setting the field value - this would violate that security restriction and thus fails.
You can't post files using ajax as javascript cannot access any local hard drive for security reasons.
There are ways to mimic ajax posting using iFrames. This link is a good example.
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html