通过ajax将图像上传到webserver，并将给定的文件名插入数据库

Im currently working on a project that requires the following.

  • I need to be able to upload an image (further scope for multiple images)
  • To an area of a webserver, rename the name of the uploaded images to what I want them to be (i.e a specific string that I state with say incrememnts on _1 _2 for multiple images e.t.c)
  • Done via ajax, as I do not want page reloads.
  • Add the returned file name/s into a db.

I have done image uploads before with php, however using the rand to generate a name and return it via post, but not via ajax, Ive done all the bits above before seperately, but not all to gether...

Ive done a quick google search, and none of them seem to work the way that I want them to.

I liked the working of this http://www.zurb.com/playground/ajax_upload but I cant for the life of me get it to work.

Thanks :)

As far as I know, an Upload using AJAX only is not possible. However, there is some kind of workaround for this. You can use a normal file upload (see http://www.php.net/manual/en/features.file-upload.php for details). Your browser will then try to display the response of the POST you just did. Therefore, you need to point the frame target of your form to a new invisible iframe, so your page content doesnt get changed. You can use the response to the POST to send new javascript code to the browser which for example can display some feedback for the user or display the image you just uploaded. The prototype library ( http://www.prototypejs.org/ ) will help you on some of these tasks.

The link above will also give you hints about how to rename the file, store it on your web server, or even store it in the db. The latter method is not recommended.

I can give you a concept not the actual code, and i have done this without any issue

  1. Create a form for file upload.
  2. Create an iFrame on page (hidden, height width 1px) so it is not visible on page
  3. Set Upload form target to that frame so when you submit data it will load page in iframe
  4. create your own upload file receiving script, and it will have the sessions and other variables
  5. the file wihch will receive the image, will store that and update the database
  6. on the page where you have upload form, add a script to iframe onPageLoad something, so when that iFrame get content it will trigger a JS, by this JS you can call another ajax call to get uploaded image and display that on your page.

if you are jQuery expert you can create your own plugin with this concept.

Please let me know if you have questions