Visualizzare un immagine come sfondo

[magic_key]

Ciao a tutti, sto cercando di adattare uno script che visualizza un immagine caricata dal PC: ora come ora, lo script carica l'immagine e la visualizza sostituendo il paragrafo <p></p>:

<input type="file" id="uploadfile" name="avatar">
<div class="result" id="avatar" style="background: url(<? echo $avatar ?>) center center no-repeat; background-size: cover; width: 120px; height: 120px; cursor: pointer; border: 2px dashed #cccccc;"><p></p></div>

ma vorrei che l'immagine caricata mi si venga impostata come sfondo e per farlo dovrei adattare il seguente codice...

$('#avatar').css('background', '#ffffff url(' + content + ') center center no-repeat').css('background-size','cover');

...da quache parte qui:

$(function () {
    'use strict';


    var result = $('#avatar'),
        currentFile,
        replaceResults = function (img) {
            var content;
            if (!(img.src || img instanceof HTMLCanvasElement)) {
                content = $('<span>Loading image file failed</span>');
            } else {
                content = $('<a target="_blank">').append(img)
            }
            result.children().replaceWith(content);
        },
        displayImage = function (file, options) {
            currentFile = file;
            if (!loadImage(
                    file,
                    replaceResults,
                    options
                )) {
                result.children().replaceWith(
                    $('<span>Your browser does not support the URL or FileReader API.</span>')
                );
            }
        },
        displayExifData = function (exif) {
            var thumbnail = exif.get('Thumbnail'),
                tags = exif.getAll(),
                row = $('<tr></tr>'),
                cell = $('<td></td>'),
                prop;
        },
        dropChangeHandler = function (e) {
            e.preventDefault();
            e = e.originalEvent;
            var target = e.dataTransfer || e.target,
                file = target && target.files && target.files[0],
                options = {
                    maxHeight: 120,
                    canvas: true
                };
            if (!file) {
                return;
            }
            loadImage.parseMetaData(file, function (data) {
                if (data.exif) {
                    options.orientation = data.exif.get('Orientation');
                    displayExifData(data.exif);
                }
                displayImage(file, options);
            });
        },
        coordinates;
    if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) {
        result.children().hide();
    }
    $(document)
        .on('dragover', function (e) {
            e.preventDefault();
            e = e.originalEvent;
            e.dataTransfer.dropEffect = 'copy';
        })
        .on('drop', dropChangeHandler);
    $('#uploadfile').on('change', dropChangeHandler);
});

qualcuno può darmi questo piccolo aiuto? Ringrazio in anticipo!

[m4rko80]

Ciao, dovrebbe essere all'interno di replaceResult() dove vai a sostituire il contenuto di $('#avatar') con content.
img.src dovrebbe già essere l'immagine(ulr) corretta da usare.

[magic_key]

Grazie della dritta, quindi qualcosa del genere? Funziona, ma non viene impostato come sfondo, anzi si sovrappone a quella caricata inizialmente...

replaceResults = function (img)
    {
    var content;


    if (!(img.src || img instanceof HTMLCanvasElement))
        {
        content = $('<span>Loading image file failed</span>');
        }
    else
        {
        //content = $('<a target="_blank">').append(img)
        $('#avatar').css('background', '#ffffff url(' + img + ') center center no-repeat').css('background-size','cover');
        }


    result.children().replaceWith(content);
    },

EDIT: non funziona, non avevo svuotato la cache

[magic_key]

Purtroppo non sono riuscito a risolvere suggerimenti?