【问题标题】:plupload does not seem to be uploading files in IE 9. It works in other browsersplupload 似乎没有在 IE 9 中上传文件。它适用于其他浏览器
【发布时间】:2014-01-27 16:06:36
【问题描述】:

在我们的项目中,我们使用 plupload 上传单个 excel 文件。这适用于除 IE9 之外的所有浏览器。单击上传链接时,将显示文件对话框,但尝试打开 Excel 时没有任何反应。以下是供参考的代码,我们将不胜感激任何解决此问题的帮助。提前致谢!

function initUploader(btnId, fileType, onSuccess) {

    if (typeof fileType == "undefined") fileType = "image";

    var arrFilters = new Array();
    var url = 'user/attachmentUpload';

    switch (fileType) {
        case "image": 
            arrFilters = [{title : "Image files", extensions : "jpg,jpeg,gif,png"}]; 
            url = 'assets/imgupload';
            break;
        case "xls":
            arrFilters = [{title : "Spreadsheet files", extensions : "xls,xlsx"}]; 
            url = 'user/attachmentUpload';
            break;
        case "media":
            arrFilters = [{
                title : "Media files", 
                extensions : "mpeg4,mob,3gpp,avi,wmv,mp3,m4a,ogg,wav"
            }]; 
            break; 
        case "document":      
            arrFilters = [{
                title : "Text files", 
                extensions : "doc,docx"
            },{
                title : "PDF files", 
                extensions : "pdf"
            }]; 
            break; 
        default:      
            arrFilters = [
                {
                    title : "Image files", 
                    extensions : "jpg,jpeg,gif,png"
                },
                {
                    title : "Zip files", 
                    extensions : "zip"
                },
                {
                    title : "Media files", 
                    extensions : "mpeg4,mob,3gpp,avi,wmv,mp3,m4a,ogg,wav"
                },
                {
                    title : "Spreadsheet files", 
                    extensions : "xls,xlsx"
                },
                {
                    title : "Text files", 
                    extensions : "doc,docx"
                },
                {
                    title : "PDF files", 
                    extensions : "pdf"
                }
            ]; 
            break; 
    }

    var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,html4,flash,silverlight,browserplus',
        browse_button : btnId,
        //container : 'container',
        max_file_size : '10mb',
        url : url,
        flash_swf_url : 'assets/js/vendor/plupload/plupload.flash.swf',
        silverlight_xap_url : 'assets/js/vendor/plupload/plupload.silverlight.xap',
        multiple_queues : false,
        filters : arrFilters,
        resize : {width : 320, height : 240, quality : 90}
    });

    $('#'+btnId).change(function(){
        uploader.start();
    });    
    uploader.refresh();
    uploader.init();
    uploader.bind('FilesAdded', function(up, files) {
        up.refresh(); // Reposition Flash/Silverlight
        Utility.showProcessingBar();
        uploader.start();
    });
    uploader.bind('Error', function(up, err) {
        alert("Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : ""));
        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function(up, file, response) {
        var obj = eval('(' + response.response + ')');
        //alert('Files uploaded');
        if (typeof onSuccess == "function")
            onSuccess(obj.fileName);   
    });

}

【问题讨论】:

  • 问题解决了吗?
  • "这适用于除 IE9 以外的所有浏览器。"请详细说明。它适用于 IE8 、 IE 7 和 IE10 吗?
  • 你有没有尝试联系图书馆的作者?
  • 控制台有错误吗?任何可见的演示?

标签: javascript php jquery file-upload plupload


【解决方案1】:

对于和我有同样问题的每个人:

我有以下 HTML 代码:

<div class="container" style="display:none">
    <div>
        Logo:
    </div>
    <div style="clear"></div>

    <div id="uploader">
        <div id="runtime" class="right">
            No runtime was found !
        </div>
        <div>
            <a id="pickfiles" href="#">[Select files]</a>
            <a id="uploadfiles" href="#">[Upload files]</a>
        </div>
    </div>
</div>

container 类被创建为对话框:

$(function(){
    $(".container").dialog({modal:true, width:400});
});

我们知道div最初是隐藏的,因为display: none(当然,你可以在对话框对象中设置autoOpen:false作为新选项),我们可以删除样式。

在 IE8(可能在早期和更高版本)中,如果 div 被隐藏,则无法正确实例化上传器。 (返回上述错误)

在 Chrome 和 Firefox 中(我没有在 Opera 中测试过这个问题),它可以正常工作。

所以,我的建议是避免隐藏块(即使您希望创建模态对话框)。

我从div 中删除了display:none 样式和dialog 对象,现在它在IE8 中运行良好。

为什么?我不知道为什么在 IE 中,在页面启动时没有创建对象的实例,而在 Firefox 和 Chrome 中,实例是正常创建的。

【讨论】:

  • 抱歉迟到的评论(有一个小职业),但这正是我最终的结果。我删除了display:none,然后将其放入$(document).ready(function(){}); 以隐藏字段。现在它也适用于 IE8 和 IE9。 (虽然没有在较低的版本上测试它,因为我只需要 IE9+ 的支持
【解决方案2】:

为了获得最大的兼容性,您应该重新排列插件优先级列表。

 var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,html4,flash,silverlight,browserplus',

替换为

 var uploader = new plupload.Uploader({
        runtimes : 'flash,html5,silverlight,browserplus,gears,html4',

确保 flash 文件存在并且路径是相对于你的 js 文件的位置。

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

【讨论】:

    【解决方案3】:

    我正在使用这个 jquery。

    你可以试试这个,因为我在 ie7+ 和所有浏览器中都使用它来上传文件。

    这里是我新手上传js文件的文件代码。

    <form id="uploadForm" method="post" enctype="multipart/form-data" action="javascript:void(0);" autocomplete="off">
                                <div class="vasplusfile_adds">
                                    <label>Upload More</label>
                                    <input type="hidden" name="myfile"  />
                                    <div class="input customfile-container">
                                        <input type="file" name="uploadfile" id="file" />
                                    </div>
                                    <div class="clear"></div>
                                    <br>
                                    <div class="input" id="status" align="left" > </div>
                                </div>
                            </form>
    
    
    <script>
      $(function() {
         $('#upload_file').live('change',function() { 
        $("#status").html('<div id="upload_now" class="btn">Click to Upload</div>');});
        $('#upload_now').live('click', function() { 
           $("#uploadForm").vPB({ beforeSubmit: function() { 
               $("#status").html('<div style="" align="center">Loading</div>');
                url: '',
                success: function(response) { // my response after file uploaded 
             }}).submit(); }); }); 
    </script>
    

    示例可以从my fiddle找到。

    祝你编码愉快:)

    在 ie7 中工作的现场演示使用 http://vasplus.info/demos/upload_without_page_refresh/index.php

    【讨论】:

    • 欢迎来到 SO。您不在这里上传文件。你发布他们的内容并缩进 4 个空格,让它看起来像代码。对于常规文本,根本不要缩进。更多提示可以在Markdown 部分找到。
    • 我提交了一个建议的编辑,我相信它可以满足您的需求。 :)
    • 谢谢杰里米。您可以在文件控制器的更改事件中使用该 $.event。
    • 我不明白你的意思。您可能会发现使用我所做的更改来编辑帖子很有帮助,看看我是如何让它看起来像这样的 - 然后您可以将其更改为您在此处所说的内容。
    • 这很奇怪.. 你有一个 .success 函数检查它是否为假?
    猜你喜欢
    • 2016-10-23
    • 2015-02-12
    • 2012-03-30
    • 1970-01-01
    • 1970-01-01
    • 2013-08-04
    • 2018-12-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多