使用asp.net webpages&上传之前的图像预览webmatrix + Jquery

时间:2011-11-19 04:36:09

标签: jquery webmatrix asp.net-webpages

我一直在尝试使用jquery&用于图像预览的ajax插件,但我无法让我的生活得到它的工作。这是我找到代码/演示的网站

http://www.zurb.com/playground/ajax_upload

我可以更改预览背景,但不会显示所选图像文件的图像。

这是我的,chtml文件

<!DOCTYPE html> 
<html lang="en">
    <head> 
        <meta charset="utf-8" />
        <link href="@Href("~/Styles/jquery/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
        <link href="@Href("~/Styles/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Href("~/Scripts/jquery-1.7.js")" type="text/javascript"></script>
        <script src="@Href("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
        <script src="@Href("~/Scripts/jquery.js")" type="text/javascript"></script>
        <script src="@Href("~/Scripts/ajaxupload.js")" type="text/javascript"></script>

        <script>     
        $(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');
            alert(file);    
            },
            onComplete: function(file, response)
            {
                thumb.load(function()
                {
                   $('div.preview').removeClass('loading');
                    thumb.unbind();
                });
                        thumb.attr('src', response);
                    }
                });
            });
        </script>       
    </head> 
    <body> 
        <h2>New Hotness</h2>
                    <div>
                                <div class="preview">
                                        <img id="thumb" width="100px" height="100px" src="../Images/Test.jpg" />
                </div>

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

                        </div>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)