Avatar billede ReneDahl Praktikant
08. marts 2012 - 15:49 Der er 1 kommentar

Imageupload Preview

Jeg har fundet en guide på et imageupload hvor imaget bliver previewet når man har browser det. I følge den her guide:

http://css-tricks.com/ajax-image-uploading/

jeg gør følgende:

1. Indsætter de to scripts i min header:

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>


2. Henter den nyeste version fra Jquery.com og ajaxuploaderen  som er vist nederst  i guiden. Alt den her: og sætter det i mappen "js"

og laver en class af loading. Som vist nede i jqueryen. Den her


>> loading img { display: none; }
_________________________________________________________________

$(document).ready(function(){

    var thumb = $('img#thumb');   

    new AjaxUpload('imageUpload', {
        action: $('form#newHotnessForm').attr('action'),
        name: 'image',
        onSubmit: function(file, extension) {
            $('div.preview').addClass('loading');
        },
        onComplete: function(file, response) {
            thumb.load(function(){
                $('div.preview').removeClass('loading');
                thumb.unbind();
            });
            thumb.attr('src', response);
        }
    });
});
_________________________________________________________________

Så langt så godt. Nu har jeg det  jquery jeg skal bruge i følge guiden. og linket det op i min header.

4. Nu skal jeg bare smide denne del af htmlen ind:

<div id="upload-area">
    <div id="preview">
        <img width="100px" height="100px" src="/images/icons/128px/zurb.png" id="thumb">
    </div>

    <form action="/playground/ajax_upload" id="newHotnessForm">
        <label>Upload a Picture of Yourself</label>
        <input type="file" size="20" id="imageUpload" class=" ">
        <button class="button" type="submit">Save</button>
    </form>
</div>

Jeg har gjort alt det fra guiden men jeg kan ikke få det til at virke.

Den eneste fejl jeg kan se er at i form tagget:


<form action="/playground/ajax_upload" id="newHotnessForm">

Kan være fordi jeg mangler en ajax uploader??
Avatar billede olsensweb.dk Ekspert
08. marts 2012 - 21:58 #1
jf reglerne er det ikke tilladt dobbelt oprettet spm luk det en af dem. svar på michael_stimspm i http://www.eksperten.dk/spm/958534
i det hele taget har du en del spm du bør følge op på http://www.eksperten.dk/list/aabnespoergsmaal/ReneDahl

spm havde nok været bedre placeret i JS evt i den serverside teknologi du anvender ( du anvender tilsyneladende C# så er det nok .NET eller C# )


hvorom alting er:
jeg prøvede lige deres online demo, den virker heller ikke :(, jeg prøvede at uploade et billed og den viste et predefineret billed af en glad person, så den er ikke overbevisende.
jeg prøvede også at uploade en js fil bare for sjov, der viser den også det predefinerede billed af en glad person.

har du lavet den serverside code der behandler det uploadet billed ?? (ikke vist i demo)
ref http://www.zurb.com/playground/ajax_upload "Now try this variation. We ditch the upload button in favor of a save button and fire the AJAX upload event as soon as a file is selected. The image is processed server side and a thumbnail is loaded onto the existing page. Dosen't that feel so much better?"

så du skal lave noget serverside der aflæser dit selected (uploadet) billed generarer en thumbnail der retunerers / eller bare retunerer billedet igen
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester