I have the following scenario:
user selects an image to upload (simple form with input field where type="file")
File is upload to server (also Db is updated)
all this i already have..
I need to display the uploaded image on the page, upon success , without refresh.
Can this be done without iframes?
I have already done some ajax coding where input is saved to db or is used to return content from db.
The thing here is sending the actual file data from the field. Can I do this using jquery's $.get?
I was thinking that after copying the file and storing relevant data in the db i could return the new location (the path in the server where the file was copied). The jquery code catching this return could use it to set the src atribute of an img tag to the new file' thus displaying it.
Can you please recommend relevant tutorials or demos?
also, any tips would be very appreciated
u need javascript for that. Provide an onClick function with ur input type file element and in that function using javascripts createElement(), setAttribute(), appendChild etc functions to append the new image to the document object.
hope it helps
The best way to do this is to use a javascript-based AJAX upload function, and there are several javascript/jQuery plugins that do this. Check out this tutorial which explains one way of doing this using the ajaxupload.js plugin, for which you can find more documentation here.
I also wrote my own tutorial on this topic, including some PHP code that you need to save the image and other changes that I think are useful for beginners. You can find that here.
You can achieve this using AJAX with PHP and MYSQL. You can upload the image with AJAX and FormData, then validate and save the image in the server and send the URL of the image in a JSON response.
Note that the most important part of this is the validation.
See this beginner's guide to learn more.
Related
Im working on a tile based tmx editor and currently have file saving working. Currently it passes the tmx to a php file called endpoint that downloads the file. it can be viewed here www.jamesplanet.net/growtopiamapeditor/beta.
What I need to know is it possible to use php to upload a file then pass the file to javascript to load into the editor?
If you need a copy of the source I can put a link
If this question isn't worded correctly or hasn't enough information please don't down vote. instead let me know what else you need to know.
Basically this need to work , you have to use iframe , which you can create on the fly and use it as posted back to php code. This is one of the common way to achieve this. There will so many third party using this concept
Possible solution: You could have the PHP script download the file, insert the file details into a table and only return a name and/or id of how to get the file details from the table in JSON format for the javascript to add the file to the list.
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 have some report that is generated from a form. I need this form to be saved automatically on the server, on submitting. Is there any way to do it?
I tried researching on the subject, but Google just throws up links where the user gotta input the URL and press submit or such method. As this pdf should be generated and saved automatically after every form submission, I guess the preferable method would be to call a service or such to generate the PDF and then save it on the server. Can you plz give me a walk-through.Thanks in Advance.
I'm working in PHP.
Here is the pdf docs from php.net. It's all there for the taking. Good luck!
PDF - Manual
I am about to embark on the same journey as I need to create a script to turn a document into a .pdf file using PHP. I don't know a lot about it yet, but it does seem possible. Try this link for starters...
http://www.sitepoint.com/generate-pdfs-php/
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.
Strange trouble
I want to upload image via ajax which many plugin does but none support textarea to write caption. As i want to assign a caption to every image ,how do my new learning task makes it different is i want user to be able to put up caption whilst image is uploading.
Do any one know of such plugin that just donot send ajax request but also have text box requests attached
Well, to answer your question, I don't know of any such plugin.
However, all plugins should support custom parameters to send as GET or POST. Check the documentation.
If it doesn't, then it sucks. You can however mod it yourselt.
If it does, then it is a simple issue of fetching the textarea value and attaching it in one such parameter to be sent.
Hope this helps you.