2

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

1 回答 1

0

看到这个：http ://forums.asp.net/t/1740831.aspx/1?Preview+Image+before+upload+

于 2011-11-19T12:07:12.910 回答