使用 asp.net 网页和 webmatrix + Jquery 上传前的图像预览答案

【问题标题】：Image preview before upload using asp.net webpages & webmatrix + Jquery使用 asp.net 网页和 webmatrix + Jquery 上传前的图像预览
【发布时间】：2011-11-19 20:07:12
【问题描述】：

我一直在尝试使用 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>

【问题讨论】：

标签： jquery webmatrix asp.net-webpages