0

I want to make my own image uploader, that supports drag and drop, jQuery AJAX functions to send necessary data to php file. I have a hard time getting started with it, since there are many solutions, but most of them are not-explained plugins, but i wanna make one by my own, to modify it and understand how it works. Any tips, where should i start in order to achieve the goal?

Malyo
  • 1,990
  • 7
  • 28
  • 51
  • You should start by examining the source code of those plugins. – kapa Feb 29 '12 at 10:12
  • I'm sure it has been asked many times and doesn't have a solution that you can't (reliably cross-browser) drag/drop file uploads with just Javascript as you can't get the file details from it. – MattP Feb 29 '12 at 10:34

4 Answers4

2

You'll be limiting yourself to modern Browsers (unless you provide a reasonable fallback). What you're looking for is the FileAPI. With that you can't iterate through directories, though. The File System API exists, but isn't supported widely, yet. SWF upload is flash based solution (I've used numerous times).

You may also want to have a look at Resumable.js. It's doing a nice job of splitting uploads into chunks. This way you can pause/resume uploads, handle really large files, etc.

Community
  • 1
  • 1
rodneyrehm
  • 13,442
  • 1
  • 40
  • 56
1

First of all, file upload through AJAX is not possible. It's an workaround that uses a hidden iframe as the target of the form. Then capture the iframe's content and do whatever you need. Here's an tutorial you can adapt to your needs.

Marius Ilie
  • 3,283
  • 2
  • 25
  • 27
  • You missunderstood me, i want my php to upload the file, ajax has to do it asynchrous only. – Malyo Feb 29 '12 at 10:19
  • 1
    I think you misunderstood my answer. Of course you need the php to make the file upload. But you cannot send those file to the php file asynchronously as regular AJAX works. You need to read that tutorial first. – Marius Ilie Feb 29 '12 at 10:23
1

PLUpload is my preference. Sleek, easy to customize, open source and supports all major technologies from HTML4 to HTML5 to Flash to Silverlight, dependent on your end users configuration

rickyduck
  • 4,030
  • 14
  • 58
  • 93
0

Uploadify is a good way to start what you are trying to achieve.. It uses jquery ajax and php to upload the images.. You can add multiple images as well and it comes with very good documentation. And its really easy to implement & understand. I would suggest you to study how this plugin works in order to achieve what your are trying to do.

Faraz
  • 156
  • 3
  • 13