Добавление изображений в div из codebehind в Asp.Net - PullRequest
Новая
       16

Добавление изображений в div из codebehind в Asp.Net

0 голосов
/ 07 февраля 2012

Я загружаю некоторые изображения, используя plupload, и добавляю эти изображения в контейнер div. И после выполнения некоторых опций мне нужно снова загрузить отредактированные изображения в тот же div из codebehind.

Возможно ли это сделать? Если да, то как я могу изменить свой код:

Вот как я пытаюсь загрузить изображения и добавить их в div (превью): 

   <script type="text/javascript">
        $(function () {
            $("#<%=uploader.ClientId%>").plupload({
                runtimes: 'gears,flash,silverlight,browserplus,html5',
                url: 'Editor.aspx',
                max_file_size: '10mb',
                max_file_count: 21,
                chunk_size: '1mb',
                unique_names: true,
                rename: true,
                dragdrop:true,
                filters: [
            { title: "Image files", extensions: "jpg,gif,png" },
            { title: "Zip files", extensions: "zip" }
        ],

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


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



            $('form').submit(function (e) {
                var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');


                if (uploader.files.length > 0) {

                    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.ClientId%>').plupload('getUploader');
            uploader.bind('FilesAdded', function (up, files) {

                var i = up.files.length,
                maxCountError = false;

                plupload.each(files, function (file) {
                    setTimeout(function () {
                        up.start();
                    }, 100);



                    if (uploader.settings.max_file_count && i >= uploader.settings.max_file_count) {
                        $.msgBox({
                            title: "Info",
                            content: "Uuh! Please don't put me any more files.<br>Maximum Upload limit is only 20 Images.<br>Rest of the Images will be removed.",
                            type: "info",
                            showButtons: true,
                            opacity: 0.1,
                            autoClose: false
                        });
                        uploader.removeFile(up.files[i - 1]);
                    } else {

                    }
                });

            });


            var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
            uploader.bind('FileUploaded', function (up, file, res) {

                $('#<%=thumbs.ClientId%>').append("<div id=" + file.id + "><a href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' rel='group1'><img class='clickImage' src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='75' height='50' data-full='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/></div>");
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    showStickySuccessToast();
                }

            });
        });




        function randomString(length) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');

            if (!length) {
                length = Math.floor(Math.random() * chars.length);
            }

            var str = '';
            for (var i = 0; i < length; i++) {
                str += chars[Math.floor(Math.random() * chars.length)];
            }
            return str;
        }
    </script>

После операции редактирования, которую я выполняю в своем коде, я сохранил все эти изображения в одной папке, где пользователи могут их сохранить. Итак, теперь я хочу добавить все существующие изображения в папку моего сервера, чтобы отобразить их. в том же разделе (большие пальцы), где я добавляю изображения с помощью загрузчика в начале.

1 Ответ

3 голосов
/ 07 февраля 2012

Чтобы получить доступ к элементу управления в коде, элемент управления должен иметь runat = "server". Однако проще использовать элемент управления Panel вместо div. Элемент управления Panel отображается как div, поэтому любой клиентский JavaScript продолжит работать. 

Image NewImage = new Image();
NewImage.ImageUrl= MapPath(@"~\Images\april.jpg");

Panel1.Controls.Add(NewImage);
...