CODEWITHSUNDEEP
javajavascripthtmlfile-upload
Maik Klein
Maik Klein

Reputation: 16148

Javascript/html - File upload

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

-> Thumbnail , title and content

What I want:

This should looks something like this:

Upload example

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

Upvotes: 1

Views: 2941

Answers (3)

Delorean
Delorean

Reputation: 491

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.

Upvotes: 1

Michael Lumbroso
Michael Lumbroso

Reputation: 4983

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/

Upvotes: 1

coder
coder

Reputation: 13250

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.

Upvotes: 1

Related Questions