Загрузка файла plupload с использованием модального диалога JQuery UI, не работающего в браузере IE

Question

У меня возникла проблема с функциональностью загрузки изображений. Я использую plupload для загрузки файлов с помощью jQuery ui modal dialog. Ii отлично работает в Firefox и Chrome, но в браузере IE он открывает диалоговое окно выбора файлов правильно, но файл не загружается. Также не отображается никаких ошибок.

Я использую ниже код:

var insert_image_dialogOpts = { 
       autoOpen: false, 
       modal: false, 
       resizable: true,      
       width: 650,     
       show: 'blind', 
       title: 'Insert Image' 
      }; 
     jQ('#insertimagebox').dialog(insert_image_dialogOpts); 
     jQ('#insert_image_dialog').click(function() { 
      jQ('#insertimagebox').dialog('open'); 
      return false; 
     });   

     uploadInsertImage = new plupload.Uploader({ 
      runtimes: 'html5,flash,gears', 
      browse_button: 'insertImage', 
      container: 'uploadImage', 
      url: '/upload', 
      multipart_params: { 
       'fancy_upload': '1', 
       'insert_image': '1',      
       'action': 'doUpload', 
       'forum': forum, 
       'uid': uid, 
       'pid': pid, 
       'timestamps': timestamps         
      }, 
      multi_selection: true, 
      flash_swf_url: '/tools/plupload.flash.swf', 
      silverlight_xap_url: '/tools/plupload.silverlight.xap', 
      filters: [{ 
       title: "Image files", 
       extensions: "jpg,gif,jpeg,jpe,png" 
      }] 

     }); 
     // General settings 
     uploadInsertImage.init();   
     // Event for each file added 
     uploadInsertImage.bind('FilesAdded', function(up, files) { 
       jQ.each(files, function(i, file) {     
       jQ('#imagesInserted').append('<li class="file" id="'+file.id+'" style="float:left;cursor:pointer;margin:0px;padding:0px;list-style-type:none;font-size:10px;"><span id="fileProgress" onclick="jQuery(this).html(\'\')"><span style="float:left;" id="' + file.id + '">' + file.name + '' + '</span><div id="' + file.id + 'progress" style="width:9em; margin-top:5px; height:.6em;float:left"></div><a id="attachCancel' + file.id + '" href="javascript:;" onClick="stopUpload(\'' + file.id + '\');">Cancel </a></span><br></li>'); 
       jQ('#' + file.id + 'progress').progressbar({ 
        value: files.percent 
       }).append('<div style="line-height:8px; text-align:center; font-size:10px;">Uploading...</div>');     
      });    

      uploadInsertImage.start();   
       up.refresh(); // Reposition Flash/Silverlight 
      }); 

Пожалуйста, помогите!

Answer 1

Глядя на ваш код, я вижу разницу между моей работой и вашим. Я думаю, что ваш отсутствующий Silverlight в вашей среде выполнения (это один Microsoft предпочитает)

Я включил мой код (только для справки)

function initializeUploaders() { 
     $('#photoUploader').pluploadQueue({ 

      runtimes : 'html5,flash,silverlight,html4', 
      max_file_size : '10mb', 
      unique_names : false, 
      filters : [ 
       {title : "Image files", extensions : "jpg,gif,png"} 
      ], 
      flash_swf_url : '<%= ResolveUrl("~/Resources/Scripts/plupload.flash.swf") %>', 
      dragdrop : false, 
      urlstream_upload : true, 
      silverlight_xap_url : '<%= ResolveUrl("~/Resources/Scripts/plupload.silverlight.xap") %>', 
      preinit : { 
       UploadFile: function(up, file) { 
        up.settings.url = 'UploadPhoto.ashx?workOrderId=' + $('#hdfWorkOrderId').val();      
       } 
      }, 
      init : { 
       FileUploaded: function(up, file, info) { 
        if (up.total.queued == 0) { 
         <%=ClientScript.GetPostBackEventReference(udpWorkOrder, "")%>;        
        } 
       } 
      } 
     }); 
} 

Answer 2

PlUpload geretared кнопки и ее функции, используя свой собственный код. Если вы хотите обойти этот код, вы должны отредактировать код из PlUpload. Это кодирование на более высоком уровне, чем я могу сделать.

PlUpload генерирует код, как показано ниже:

<div class="plupload_buttons"> 
    <a href="#" class="plupload_button plupload_add" id="photoUploader_browse" style="position: relative; z-index: 0;">Add files</a> 
    <a href="#" class="plupload_button plupload_start plupload_disabled">Start upload</a> 
</div> 

проверить ваш браузер HTML-код, если он соответствует выше. Если это не так, вы знаете, где проблема.

Единственный способ, о котором я думаю, - найти пример, который работает, в том числе IE, и оттуда кодировать его в соответствии с вашими предпочтениями. Извините, я не могу больше помогать.

Answer 3

Спасибо всем!

Теперь моя проблема исправлена. Я использовал ниже код, чтобы открыть jQuery ui modal dialog и его правильную работу с библиотекой plupload.

 dialog = jQ('#insertimagebox').dialog({ 
    autoOpen: false, 
    width: 650, 
    modal: false, 
    title: 'Upload file', 
    closeText: 'Close' 
    }); 

    jQ('#insert_image_dialog').bind('click', function (event) { 
     event.preventDefault(); 
     jQ('#insertimagebox').dialog('open') 
    });  

Вы также можете получить полный код с GitHub: https://github.com/ljosa/plupload/blob/jquery_ui_dialog/examples/jquery_ui_dialog.html

Спасибо!