Solved

Ajax PHP Image Upload?

Posted on 2008-06-10
6
2,847 Views
Last Modified: 2009-02-01
I cant seem to get the Image Content into the AJAX script.. keeps passing a null.

anyone got a short & sweet example?
0
Comment
Question by:n8dog
6 Comments
 
LVL 18

Accepted Solution

by:
Hube02 earned 168 total points
ID: 21756075
No, you cannot upload files with Ajax. At least I have not seen a way to do so. JavaScript cannot access the file type input box.

The best way is to provide a button "Upload File" that opens a popup window that handles the upload. The when that form is complete it can update a hidden field in your ajax form that contains the path to the file on the server.
0
 
LVL 36

Assisted Solution

by:Loganathan Natarajan
Loganathan Natarajan earned 166 total points
ID: 21756588
0
 
LVL 11

Assisted Solution

by:bansidhar
bansidhar earned 166 total points
ID: 21757219
You cannot upload the images (any file) through AJAX. You have to go in for some workaround for this. Try using iframe as form target.
If you want to have a real progress bar there is no way to do this in PHP alone as PHP can determine the file size only after the file is fully uploaded. You may have to go in for PERL here. PERL can read the raw header and determine the size and content type of the file being uploaded and even abort transfer.
I use PERL for my upload because I can have a nice upload progress bar and have control over file before upload is finished. The best part I love in this is I can almost instantaneously alert the user if the file type is not correct and abort the upload. The only drawback is maintenance,  a lot of complicated code in different languages and if there is a bug tracing is almost a hell.

The way I do this is I send the file to the server (file_upload.pl) using iframe and invoke a timed JavaScript to check the status via AJAX (file_upload_status.pl) the file file_upload_status.pl interacts with file_upload.pl using IPC (I use only linux machines)


There is another method using JavaScript. It is again using iframe. Here create an Iframe and a form dynamically and then attach the file to it and submit the form. you may have to reattach the objects back to your original form later. I can provide a simple example (secod one)

The code below are just samples oh how to do this and will not work out of the box.
<!-- Iframe method -->

<iframe id="upload_target" name="upload_target" src="#" style="width:0px;height:0px;border:0px solid #fff;"></iframe>

<form method="post" action="/ajax/upload.php" enctype="multipart/form-data" target="upload_target" onsubmit="import_ol_contacts();">

<input type="file" name="u_file" id="u_file"/>

<input type="submit" value="Upload File" />

</form>

----------------------------------------------------------------------
 
 

<script type="text/javascript">

<!--

function fileUpload(){
 

    var theFile = document.getElementById("attachfield");

    var theText = document.getElementById("sometext");

    var theButton = document.getElementById('file_attach_btn');

    var fileParent = theFile.parentNode;
 

    // create a div with a hidden iframe and form

    var theDiv = document.createElement('div');

    theDiv.style.display = 'none';

    theDiv.innerHTML =

       '<iframe id="hidden_frame" name="hidden_frame" src=""></iframe>' +

       '<form id="hidden_form" target="hidden_frame" action="upload.php" enctype="multipart/form-data" method="post"></form>';

    document.body.appendChild(theDiv);

    var hiddenForm = document.getElementById("hidden_form");

    fileParent.removeChild(theFile);

    fileParent.removeChild(theText);

    fileParent.removeChild(theButton);
 

    // attach the file to the hidden form

    hiddenForm.appendChild(theFile);

    hiddenForm.appendChild(theText);

    hiddenForm.submit();
 

    // remove the file from the hidden form

    hiddenForm.removeChild(theFile);

    hiddenForm.removeChild(theText);
 

    // put the file back where it came from

    theFile.value = '';

    fileParent.appendChild(theFile);

    actionParent.appendChild(theText);

    fileParent.appendChild(theButton);
 

}
 
 

<form enctype="multipart/form-data" id="uploadform" method="POST" action="upload.php">

	<input type="file" name="file_attached" id="attachfield"/>

	<input type="text" name="sometext" id="sometext" />

	<input type="button" id="file_attach_btn" onclick="fileUpload();return false;" value="Attach file" />

</form>

Open in new window

0
 
LVL 1

Expert Comment

by:blackiemorgan
ID: 23524977
Use the next example. Easy to use and learn and easy to customise.

http://www.ajaxf1.com/product/ajax-file-upload.html

0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now