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

Question

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 :)

Answer 1

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.