使用 ASP.NET 网页上传前的图像预览网络矩阵 + jQuery

发布于 2024-12-16 22:05:57 字数 2577 浏览 2 评论 0原文

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

原文

i've been trying to use a jquery & ajax plugin for the image preview but i cant for the life of me get it to work. This is the site I found the code/demo

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

I can get as far as changing the preview background but then no image is shown for the selected image file.

this is my ,chtml file

<!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>

分享到QQ

分享到微博