使用jQuery UI模式对话框无法上传文件上传在IE浏览器上不起作用

Question

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

谢谢大家！

现在我的问题已解决。 我使用下面的代码打开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

谢谢！

Answer 2

查看您的代码，我发现运行时与您的运行时有所不同。 我认为您的运行时缺少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 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的示例，然后从那里进行编码到您的自定义首选项。 抱歉，我不能再坚持了。