Dynamic image upload like in facebook

Doing like facebook for uploading an image will make your web site instinctive. The main difficulty for making it is that you cannot post any multimedia object using AJAX, you must submit the image from a form within the web page. That is why you have to declare a "virtual" form (not accessible directly for input): To do it in java, here is the tip: In your JSP page add the virtual form:

<div class="row-fluid">
    <div class="span2 vertical-align">
    <img id="pictureImg" class="hidden"    src="showPicture.action" />
</div>

In your JSP page add the virtual form:

<!-- Div to upload image (replace original) -->
<div id="uploadDiv">
    <s:form target="upload_target"
        action="UploadPicture"
        enctype="multipart/form-data" id="pictureForm">
        <ul class="error">
            <li id="fileUploadErrorExtension" class="hidden"><s:text
                    name="picture.error.extension" /></li>
            <li id="fileUploadErrorSize" class="hidden"><s:text
                    name="picture.error.size" /></li>
        </ul>
        <div class="picture" id="picture">
            <input type="file" id="pictureFile"
                name="pictureFile" />
            <div class="message hidden" id="pictureMessage">
                <s:text name="picture.change" />
            </div>
        </div>
    </s:form>
    <iframe id="upload_target" name="upload_target" src="#"
        style="width: 0; height: 0; border: 0px solid #fff;"></iframe>
</div>

In your page JS, you must add

<script language="javascript" type="text/javascript">
    window.top.window.etlb.Utils.upload.callback();
</script>

This binds HTML with JAVA script

"use strict";
// At window loading the variables of JS are initialized. 
$(window).load(function() {
        Global.Utils.upload.url = 'displayPicture.action';
        // Binds the pictureImg to the variable in JS file.
        Global.Utils.upload.img = $('#pictureImg');
        Global.Utils.upload.initUpload();
});



var Global = {
    Utils : {
        upload : {
            // global var to store the image, url to get the new img
            url : null,
            img : null,
            callback : function() {
                // callback of server : reinit upload the random prevent from caching the image.
                Global.Utils.upload.img.attr('src', Global.Utils.upload.url
                        + '?random=' + Math.random());
                Global.Utils.upload.img.bind("load",function(){
                Global.Utils.upload.initUpload();
                });
            },

            initUpload : function() {
                // Replace initial image with a div background by the upload div and hides the image
                Global.Utils.upload.img.addClass('hidden');
                Global.Utils.upload.img.after($('#uploadDiv'));                                                            
                $('#picture').css(
                        'background-image',
                        'url(\'' + etlb.Utils.upload.img.attr('src')+ '\')');
                // When the mouse enters the image, the change image label is displayed
                $('#picture').mouseenter(function() {
                    $('#pictureMessage').removeClass('hidden');
                });
                // When the mouse enters the image, the change image label is hidden
                $('#picture').mouseleave(function() {
                    $('#pictureMessage').addClass('hidden');
                });

                var extension = [ 'jpg', 'jpeg', 'png', 'bmp', 'gif' ];
                $('#fileUploadErrorExtension').text(
                        'Error Uploading');
                var validFileExtension = function(fileName) {
                    for ( var i in extension) {
                        if (fileName.toLowerCase().indexOf(
                                '.' + extension[i].toLowerCase()) != -1) {
                            return true;
                        }
                    }
                    return false;
                };
                var validFileSize = function(size) {
                    return size <= 1024 * 1000;
                };
                // When the picture file is changed you upload the image by sumbitting the form.
                
                $('#pictureFile').change(function(e) {
                    var input = this;
                    var fileName = '';
                    var fileSize = '';
                    if ($.browser.msie && e.target.value) {
                        fileName = e.target.value;
                        fileSize = '1000';
                    } else if (input.files && input.files[0]) {
                        fileName = input.files[0].name;
                        fileSize = input.files[0].size;
                    }
                    if (!validFileExtension(fileName) && fileName != '') {
                        $('#fileUploadErrorExtension').removeClass('hidden');
                        return;
                    }
                    if (fileName == '') {
                        $('#fileUploadErrorExtension').addClass('hidden');
                    }

                    if (!validFileSize(fileSize)) {
                        $('#fileUploadErrorSize').removeClass('hidden');
                        return;
                    }

                    $('#fileUploadErrorExtension').addClass('hidden');
                    $('#fileUploadErrorSize').addClass('hidden');
                    
                    // Send
                    $('#pictureForm').submit();

                });

            }
        }
    }
};