Javascript / html - 文件上传

Question

I have a news section where I can post some news.

-> Thumbnail , title and content

What I want:

• The user should be able to upload an image file without leaving the page -> progress bar

• Send the file as a post request to my server.

• Then I can get the image file from the post request, then I can resize/rename the image and upload it to amazon s3.

• If I have to use a javascript library, I would prefere to use jquery.

This should looks something like this:

If I submit the news, I want to save the image path in my database. Now I would need a way to get the image name from my post method.

I've found some uploading solutions, but I have problems to understand how they are working.

http://blueimp.github.com/jQuery-File-Upload/

http://www.uploadify.com/

I only know get/post to retrieve information but they integrate somehow php files in the form. for example:

$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : 'uploadify.php'
        // Put your options here
    });
});

I am lacking information to do this on my own. What would you recommend me?

Ps: I am using Java with Play2

Answer 1

You can do something like this from the documentation :

$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onSelect' : function(file) {
            alert('The file ' + file.name + ' was added to the queue.');
        }
    });
});

Where you can get the flename once it has been selected.

Answer 2

What you're asking for is a LOT really. But to get you started, have a look at this page (uses JQuery):

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

The above link is a nice upload utility that you can use for drag-and-drop pretty easily, but it can be used by manually selecting files as well. Well documented.

As for resizing, I've used this with great success (PHP): simpleImage

simpleImage is REALLY easy to use and plug into your website.

Answer 3

Uploadify is definitely the way to go. All the steps for implementation are to be found here : http://www.uploadify.com/documentation/uploadify/implementing-uploadify/

You need to configure the path where your uploads go in the uploadify.php script.

As for amazon S3 here is an implementation : http://code.google.com/p/uploadify-amazon-s3/

I think onUploadSuccess method better fits than onSelect : http://www.uploadify.com/documentation/uploadify/onuploadsuccess/