i have a doubt with the upload system in PHP.
What is the difference between Normal Upload [ without ajax ] and Ajax Upload ?
By using Javascript i can send values to the server ,is it possible in the case of Files ?
Is there any limitation for this ? and i found that so many uploaders are using FLASH for to upload FILES,
ex:Gmail,uploadify.....
How can i build a basic uploader with JQUERY/javascript ? also i heard that i cant send FILE by a XHR request.
i am using Codeigniter Framework.
Expecting Possible duplicate or other refference
Main Goal Of this Question is to build my own uploader for my current project[neat and clean]
Okay, AJAX upload is basically just that, it's going through Javascript. The difference is that the page does not upload, and you can carry on with other things as it works. It generally makes for a better user experience in my opinion, it feels more seamless
On the other hand, it only works for newer browsers. Firefox, Chrome, Opera have it, but not IE (maybe Safari?). It also works well with drag and drop. I once made an image uploader inside a text editor, where it popped up a table with your currently uploaded images, you clicked one and it added it to the textbox or you dragged a new image into a box and it uploaded and displayed it straight away. It was beautiful.
Here's the plugin I used to help me
http://dropup.net/
Edit: No limitations either, you can even send plain binary data in
well as if you want to upload the file with jquery ajax request then use ajax form plugin as well,
this link Ajax From will help you to understand and implement on your page,
but i don't know about codignighter frame work cause i don't have experience of that. And ajax is the best way to distribute the process into different parts with any extra load on the page i mean ajax request will work on the back end..
Related
Reference: PHP, Jquery File Upload, Yii, XUpload
Jquery File Upload, retrieving uploaded data and displaying using the UI Template
(similar to the template displayed after uploading, purpose is to generate the already uploaded data using the UI Tempalte)
https://github.com/blueimp/jQuery-File-Upload
"set form data on page load"
I already uploaded files and these files are automatically viewed using js_encode of the file properties and xupload immediately shows them on template. But how will I have the same view/result when I visit again the page next time (assuming files were already uploaded and the upload start has not yet run)?
I tried doing an echo js_encode of the same properties in the controller. Instead, it just printed out the data and was not read by the xupload, unlike what happens right after uploading files.
Am I missing something? I've been reading, but haven't found any answers yet.
I have no easy way in mind to do this, but i think the easiest way to do this, is to inspect the code, and how its build and do the same in your view, using the same classes should trigger the same event binds and the same layout.
I not sure why you want to load the data with js if you already have them in your controller/view in php. dont overdo js, it will only make your users browser slower and the controller is already 'controlling' the data. No i am a Back-end Developer but my Front-end colleagues always tell me : "Avoid DOM manipulation if not needed, it will make client side slower and it might turn out differently in every browser"
I want to have a single button that when clicked opens a file dialogue, and then after the user selects the photo they want to upload and the dialogue closes. I want the photo to upload. I cant think of a way of doing this because in the form you cant use both the type = file and type = submit together. Would I need to use jquery to achieve this? Thanks.
Yes, the idea is to use jQuery for the inital part of having a user pick a file to upload... and then some sort of other, server-side language (like PHP,) will actually do the heavy lifting (by actually uploading the file.)
Here's a jQuery plugin that helps you do this:
http://blueimp.github.com/jQuery-File-Upload/
EDIT:
Yes, I believe with jQuery (or some other library... or plugin,) it would be possible to have an event listener (or something,) pick up when a user browses for a file to upload... and automatically starts to upload it once the file has been chosen. But, again, as was said earlier, it's probably safer to take a two-step approach to file uploads for now.
try this
One-Click Upload is a jQuery plugin that replaces the standard file
input element, allowing you to use any link, image or element to be
used for the purpose of bringing up the "file browse" dialogue. It
completes the upload behind the scenes without refreshing the page,
making it less obtrusive and easier to style than a standard upload
form.
To get the upload started the way you describe you will need to use JavaScript. jQuery is a very good library to use to make that process easier, but it is not required.
I Am building a simple application with drag and drop functionality (a stickies board is good example) the users will post text stickies via Ajax, php. Which loop back and be draggable stickies (done using jquery ui).
I did want to have image upload too. but research has pointed to the fact this not possible with Ajax. So any ideas? I have Heard about using iframe as a target for the post data (to fake Ajax).
I have seen it done, the site that gave the idea is www.stixy.com. This what I am after in an ideal world.
If you are using jQuery, this is a great plugin that will make it easy for you to upload multipart form seamlessly.
http://jquery.malsup.com/form/
It will handle the creation of the iframe and everything else.
I have a classifieds website, and when posting a new ad, users may chose to upload pictures.
Currently, the form on the page submits to itself whenever a file is chosen, and then PHP uploads the actual file, which is then lastly displayed to the user.
I use javascript to set some hidden-inputs on the page, and then submit the form to itself:
if (action!='remove'){
document.getElementById("pic_nr").value=nr;
document.getElementById("total_pics").value=nr;
document.getElementById("pic_action").value='upload';
var form = document.forms['ad'];
form.action='new_ad.php';
form.submit();
}
Then in PHP, it processes and uploads the image (which takes some time) and after its done the image is displayed in the same form.
Now I need to have a progress bar of some kind, which shows the user that the server is actually DOING something.
Because uploading a standard 2,5MB file from a digital-camera takes some time (around 10s), and usually the user doesn't understand that "something is happening" in the background.
Is there any standard reliable, cross-browser solution to add a loading bar with either JS or PHP, or even maybe both combined?
Any tips and ideas are appreciated.
Thanks
This site seems to have a pretty comprehensive list of tutorials with various approaches. JQuery to me would seem to be the best option to go with as it usually is pretty reliable between browsers and platforms.
you could POST the form using AJAX and on firing the form POST load a "loading" spinner on the page until you get a postback with a status from the server.
I'm adding a link to a sample HTML5 script that does it with drag-n-drop...
http://craigslist.fatherstorm.com/dragndrop.php
I wud like to use file upload(ajax/javascript with php) in my form that has other controls also.
when i uploaded an img it displays on the same form with delete option.
if i click on submit it goes into folder as well as database &
if i click on delete it deletes an img....
anybody can help me?pls
u knw gmail file upload exact like that
It boils down to "Don't use XHR. Do use Flash or iframes". There are libraries that will do the heavy lifting for you.
Just use jQuery ajax upload plugin http://valums.com/ajax-upload/. It is actually not ajax, it's invisible iframe, but result is almost same.
For server-side you can use php with gd-library and some simple MySQL queries.