plupload does not seem to be uploading files in IE

问题:

In our project we are using plupload to upload a single excel file. This is working in all the browsers except IE9. On click of the upload link the file dialog box is displayed but nothing happens when tried to open the excel. Below is the code for reference and any help to solve this will be much appreciated. Thanks in advance!

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);   
    });

}

回答1:

For everyone who has the same problem as me:

I had the following HTML code:

<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>

The class container was created as dialog:

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

As we know that the div is initially hidden because of display: none (of course, you can set up autoOpen:false as a new option in the dialog object), we can remove the style.

In IE8 (probably in earlier and later version) the uploader cannot be instantiated properly if the div is hidden. (Returns the above error)

In Chrome and Firefox (I did't test this issue in Opera), it works fine.

So, my advice is to avoid hidden blocks (even if you wish to create a modal dialog).

I removed the display:none style and dialog object from that div and now it works very good in IE8.

Why? I don't know why in IE, the instance of object is not created at the start-up of the page, though in Firefox and Chrome, the instance was created normally.

回答2:

For max compatibility you should rearrange the plugins priority list.

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

REPLACE THAT WITH

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

Make sure the flash file exist and the path is relative to the location of your js file.

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

回答3:

I am working with this jquery.

You can try this out as I am working with this in ie7+ and all browser fro my file uploads.

Here is the file code I am newbie on how to upload js file at here.

<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>

Example can be found from my fiddle.

Have a happy coding :)

live demo use working in ie7 http://vasplus.info/demos/upload_without_page_refresh/index.php