I have one HTML form where I enter the Text fields and finally upload a image file into the server.
(HTML file:<input type="file" name="filename"/ >)
I use Ajax technique and HTTP POST request to perform this task.
But I'm unable to upload file but can see the text filed values in database.I'm trying to upload image file into a folder using getimagesize($_FILES['filename']['tmp_name']and move_uploaded_file() to move from temp folder to specific folder.
FirePHP is showing the warning message as :getimagesize() [function.getimagesize]: Filename cannot be empty in my .php file on line 19
line 19 contains the getimagesize() statement.
Could anybody please let me know is it possible to upload a file using ajax technique?or any other better way to do this?
Any help is greatly appreciated.
I will give you three basic ways to work on AJAX-based file uploads..
1) Faking AJAX-based file uploads - You'd create an iframe on the page (that you can hide with CSS), you can target your form to POST to that iframe.
<form target='upload_target' id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;display: none;"></iframe>
</form>
2.) FILE API: if your browser supports it, you can use the sophisticated FILE API to do what I'll call a Pure AJAX file upload - https://developer.mozilla.org/en/using_files_from_web_applications
3) You can use existing JQuery plugins such as Ajax File Upload and Multiple File Upload. Please do look up more such from the JQuery site, evaluate for cross-browser compatibility and use.
Related
As part of a class I've been asked to create a simple file upload system that uploads files in a single button to a folder called ./files. I've been able to do this and I have been able to keep it all contained in one a3.php file with this:
<form action="a3.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload" name="submitFile">
</form>
Which opens up a file dialog and only requires the user to press two buttons
I use the following function to run the upload function.
if(isset($_POST['submitFile']))
{
uploadFile();
}
The uploadFile() function simply uses move_uploaded_file to move to file to the ./files folder. Currently without any questions asked.
My issue is that my attempts to make the buttons for the file upload a single one have been stymied. I have attempted to use the following code to resolve the issue:
<form name="frm" action="a3 - Copy.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" onchange="frm.submit();">
</form>
Which, while it refreshes the page as if an action is being performed, appears to do nothing. I have attempted to look into how exactly .submit() works but haven't gotten any closer to understanding any intricacies it may have while a part of onchange.
I've looked around and I've found code that can upload in a single button, and I've found code that can upload using an internal php function, but none that does both.
You can try using a button but not displaying it. When the file input is changed, using javascript trigger a click on the hidden button, like in the code below:
<form name="frm" action="a3 - Copy.php" method="post" enctype="multipart/form-data">
<input type="submit" name="submitFile" style="display:none" id="submit">
<input type="file" name="uploadFile" onchange="document.getElementById('submit').click()">
</form>
<?php
if(isset($_POST['submitFile']))
{
uploadFile();
}
?>
You're basically looking for an ajax upload. You can do this using javascript (on modern browser), and the easiest thing would probably be using a library like jquery. Otherwise, you can do it using an iframe.
Here are a few similar questions with example scripts-
Using HTML5 file uploads with AJAX and jQuery
jQuery Ajax File Upload
I am writing a fingerprint web application. I will read the fingerprint from user using ActiveX controls.
After that, I will get the image in the webpage. I found that the examples I found in the web requires users to click an upload image button and choose image from it.
Like the example below:
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>
Some tells me that I need to use ftp to upload the file.
Can I have another choice? The best method is that I can use Http to upload.
You could send a data URI to the server using AJAX
Convert Data URI to File then append to FormData
However if you are using ActiveX, why not have the ActiveX send the data to the server from within the ActiveX?
I have a page that the user can upload an image to and then move around and resize using jquery draggable and jquery resizable.
To save on mutilple requests to the server, would it be posible to use the locally stored version of the image to speed things up and then have a save button which would only upload the image to the server when requested.
I have tried to do this unsuccessfully as I am only getting the temp location of the file
<?
$posted=$_REQUEST['posted'];
if($posted!='')
{
$image = $_FILES['file']['tmp_name']."/".$_FILES['file']['name'];
?><img src="<? echo $image ?>" width="480" height="360" /><?
echo "posted=".$image;
}
?>
<form action="#" enctype="multipart/form-data" method="post">
<input type="hidden" name="posted" value="1" />
<input type="file" id="file" name="file" size="30" />
<input name="submit" type="submit" value="send" />
</form>
is this possible?
You have to move the uploaded file using move_uploaded_file() to the destination you want.
If you mean "resize the image on the user's computer in their browser and then upload once the cropping is done" then no.
As far as I am aware that's not possible unless you use Flash or a Java plugin for example.
The $_FILES['file']['tmp_name'] variable contains the temporary location of the uploaded file on the server. Temporary files are removed regularly, so to keep the uploaded file on the server you need to use move_uploaded_file().
according to the manual the super global $_FILES is
An associative array of items uploaded to the current script via the HTTP POST method.
So in order to use this global you have to have the images uploaded. I would say that you could avoid multiple requests to the server after you upload the image using jquery and using the move_uploaded_file() only after the user has chosen the size he wants.
Doing it the way you have suggested is not possible with only javascript and PHP. AS far as I know at least.
Good Day, I have a form with multiple file input fields. I have a script that automatically adds another file input field on change. This is for a image upload functionality ( so that the user can upload multiple images in one go ). In Firefox, it works fine, but it fails on ie8.
this how the form looks like when many images were selected
form.html
<form class="ysForm" action="uploadImage.php" encType="multipart/form-data" method="post">
<input name="ys-file_0" class="ysFile" type="file" multi_selector="[object Object]"/>
<input name="ys-file_1" class="ysFile" type="file" multi_selector="[object Object]"/>
<input name="ys-file_2" class="ysFile" type="file" multi_selector="[object Object]"/>
</form>
uploadImage.php
foreach( $_FILES as $theFile ) {
//do image resize and save to a directory code
}
But uploadImage does not seem to get the image files.
Please help
According to other answers, such as the one here, IE8 doesn't support the multiple option for file inputs.
IE8 doesn't support multiple file uploading with
You can see this info:
IE8 - input (type="file") get files
http://social.msdn.microsoft.com/Forums/en-US/f0e72657-962f-4254-b95c-c47482401899/multiple-file-uploading-in-ie9-and-older-versions?forum=ieextensiondevelopment
Most modern browsers (including IE8) support multiple file uploading with a single dialog. The syntax is
<input type="file" multiple="true" name="upload" />
Your form will call your php script multiple times, once for each image.
That being said, I suggest using Uploadify, http://www.uploadify.com/, as it's a lot easier. There are also some fancy JQuery based solutions.
I have an image uploader that uses the imgur.com API and jQuery's .ajax() function to upload images to their servers. However, if I browse for an image using the <input type="file"/> element of the form, it will only be successful in uploading an image if the image file is found in the same directory as the page.php file that the form is found in (shown below). How can I allow the form to upload images from any directory on my computer?
page.php:
<form action="page.php" method="post">
<input type="file" name="doc" id="doc" /><br/>
<input type="image" src="go.gif" name="submit" id="submit" />
</form>
You've forgotten the enctype="multipart/form-data" attribute on your form tag, for one. Without that, file uploads generally don't work too well.
Beyond that, the server won't really care what directory you're uploading FROM, especially under PHP. The uploaded copy on the server is stored with temporary filename ($_FILES['file']['tmp_name']) that has absolutely nothing to do with the directory/filename on your computer.
Once it's on the server, you'll have to actually move that temporary file somewhere else, as PHP will auto-delete it once the script terminates and you've not handled it yourself. move_uploaded_file() is what's generally used to take of that process.
Perhaps this is the only folder with write-permissions.
I guess it is jquery that is doing the actual posting to http://imgur.com/api/upload as the form is just posting to itself, so my guess is that jquery / javascript can only read files in your web-space and not on your whole hard-drive.