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.
Related
I want to make a button generator with javascript in my site, something like this http://css-tricks.com/examples/ButtonMaker/ .
But I want to add a save button too, so that the user will be able to save the button image he creates. I want to save the image in my server with PHP if possible.
Does anyone have an idea, of what should I really read or search for?
Thanks in advance
The button in the example generator is rendered by your browser. It is just a button element which is styled. I don't think you can easily save it using php.
What you could do is create a button generator that accepts parameters and then renders the image serverside (using php) and sends it to the browser for displaying. This rendered image can then easily be saved.
The link you've provided just defines the CSS for the element - you just eed to send this back to the server - via a form or ajax.
One approach would be to send the css settings to your server and execute an html renderer which somehow allows you to save a screenshot of the button.
Googling for "html renderer" yields several results, but I can't tell whether any of them offers an API that allows you to easily save images of desired elements.
(Of course, Firefox and Chrome all count as html renderers too).
In the worst scenario, using my approach, you'd have to render the button server side, take an screenshot and use some algorithm to find and cut the button from the screenshot.
I'd say this is a complicated approach overall. I'd go with what Iljaas' says.
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..
I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.
I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.
Bonus points for:
Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
Uses some method other than Flash as a default for upload.
Uses jQuery as I use it a lot.
RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
Uses new technologies, like HTML5 and / or CSS3.
Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like #hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.
To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).
Anything in here that meets with your reqs? http://ckeditor.com/developer-features
You taken a look at TinyMCEor CKEditor?
The "fake answer" you gave yourself is quite accurate. You would need a RTE editor that supports custom functionality.
The logistics would go along these lines:
User presses a button
An empty div is appended to the input with a unique id
An image uploader popup will open, with pointers to the new div
A combination of jQuery / AJAX / PHP will allow the user to upload a file within the page
The filename is returned after the upload process and inserted in the originally appended div
If you are looking for the specific code for each of these steps, I would recommend finding some tutorials as this isn't something that we can write some fast example code for.
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.
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