开发者

JQuery - upload and show preview image (based on ZURB)

I'm newbie in scripting and try to follow Zurb articles on Image Uploads with 100% Less Suck. Guaranteed. But still can not make it right. On requirement said that I need JQuery and AjaxUpload plugin. So I do make links to files needed:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.zurb.com/javascripts/plugins/ajaxupload.js"></script>

(Sorry Zurb and others that I use the links, I use the file for educational purpose only. I don't mean anything bad)

This is the script that I follow from Zurb

JQUERY

$(document).ready(function(){
    var thumb = $('img#thumb'); 

    new AjaxUpload('imageUpload', {
        action: $开发者_如何学Python('form#testForm').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);
        }
    });
});

CSS

span.wrap { padding: 10px; }
        span.wrap.new { margin-left: 30px; }        
        span.wrap button { display: block; margin-top: 10px; }
        span.wrap label { margin-bottom: 5px; }
        div.preview { float: left; width: 100px; height: 100px; border: 2px dotted #CCCCCC; }
        div.preview.loading { background: url(http://www.woningcorporatie-processen.nl/static/modules/sensus/images/loading.gif) no-repeat 39px 40px; }
        div.preview.loading img {display: none; }
        input#imageUpload { width: 400px; }     
        span.wrap form { margin: 0; }

HTML

<div class="wrap">

    <div class="preview">
        <img id="thumb" width="100px" height="100px" src="https://greenhouse.lotus.com/plugins/plugincatalog.nsf/blankLogo.gif" />
    </div>

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

Already try in JsFiddle but not working good. Can you guys help what I supposed to do so I can preview the uploaded image with this Jquery?

Thanks a lot!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜