使用 Jquery UI 模式对话框上传文件上传在 IE 浏览器上不起作用答案

【问题标题】：plupload file upload with Jquery UI modal dialog not working on IE browser使用 Jquery UI 模式对话框上传文件上传在 IE 浏览器上不起作用
【发布时间】：2013-08-05 18:56:21
【问题描述】：

我遇到了图片上传功能的问题。我正在使用 plupload 通过 jQuery ui 模态对话框上传文件。 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
            });

请帮忙！

【问题讨论】：

标签： jquery user-interface modal-dialog plupload

【解决方案1】：

谢谢大家！

现在我的问题已解决。我已经使用下面的代码打开了 jquery ui 模式对话框，并且它与 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

谢谢！

【讨论】：

【解决方案2】：

查看您的代码，我发现我的运行时和您的代码之间存在差异。我认为您在运行时中缺少的银光（这是微软更喜欢的）

我包含了我的代码（仅供参考）

    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, "")%>;                            
                    }
                }
            }
        });
 }

【讨论】：

谢谢！我添加了silverlight，但仍然无法正常工作。我认为 Jquery UI 模式对话框的问题。没有 jquery 对话框，它工作正常。所以请使用 ui 节点对话框运行。

【解决方案3】：

PlUpload 使用自己的代码生成按钮及其功能。如果您想绕过该代码，您应该从 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 的示例，然后从那里将其编码为您的自定义首选项。抱歉，我无法提供更多帮助。

【讨论】：