如何在 jquery 中使用 Asp.Net Image 控件答案

【问题标题】：How do I use Asp.Net Image control in jquery如何在 jquery 中使用 Asp.Net Image 控件
【发布时间】：2011-12-18 23:27:05
【问题描述】：

我想知道如何在 jquery 中使用普通的 Asp.Net Image 控件将其 URL 路径显示为Image1.Imageurl=""

这是我的脚本：

  <script type="text/javascript">
        // Convert divs to queue widgets when the DOM is ready
        $(function () {
            $("#uploader").plupload({
                // General settings
                runtimes: 'gears,flash,silverlight,browserplus,html5',
                url: 'Final.aspx',
                max_file_size: '10mb',
                max_file_count: 25,
                chunk_size: '1mb',
                unique_names: true,

                // Resize images on clientside if we can
                //                    resize: { width: 320, height: 240, quality: 90 },

                // Specify what files to browse for
                filters: [
            { title: "Image files", extensions: "jpg,gif,png" },
            { title: "Zip files", extensions: "zip" }
        ],

//                resize: { width: 320, height: 240, quality: 90, beforeUpload: false },

                // thumbnails
                thumb: { width: 100, height: 100, quality: 90 },

                // Flash settings
                flash_swf_url: 'js/plupload.flash.swf',

                // Silverlight settings
                silverlight_xap_url: 'js/plupload.silverlight.xap'
            });


            // Client side form validation
            $('form').submit(function (e) {
                var uploader = $('#uploader').plupload('getUploader');

                // Files in queue upload them first
                if (uploader.files.length > 0) {
                    // When all files are uploaded submit form
                    uploader.bind('StateChanged', function () {
                        if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                            $('form')[0].submit();
                        }
                    });

                    uploader.start();
                }
                else
                    alert('You must at least upload one file.');

                return false;
            });
            var uploader = $('#uploader').plupload('getUploader');
            uploader.bind('FileUploaded', function (up, file, res) {

                $('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");

            });    
        });
</script>

上传完成后，我只需要在图像控件内显示一张图像，如果使用追加，则它正在添加所有图像。

这是我的图像控件：

 <asp:Image ID="Image1" runat="server" BackColor="#0099CC" BorderStyle="None" 
                                Height="624px" Width="500px" />

【问题讨论】：

标签： jquery asp.net image controls

【解决方案1】：

Image.ImageUrl 转换为 <img src=''>，因此使用 JQuery 设置 src 属性。您只需要掌握一种技术来获取客户端所需的 URL，以显示该特定图像。

【讨论】：

实际上在上面的代码中我有一个名为 showfilelist 的 div，现在显示所有上传的图像如果我使用然后如何将此图像添加到所需的 Image.ImageURL如果我使用附加，那么所有的图像都附加到它上面。
您不能使用附加 - 因为您有一个图像列表，并且只想显示一个。所以我要问一个问题；如果您只想显示一张图片，当上传多张图片时，您要显示哪一张（第一张，最后一张，幻灯片）？
我想上传第一张图片或最后一张图片，但没有此类偏好。