Blueimp文件上傳沒有發生在IE 8

Question

我在一個項目上使用blueimp文件上傳插件，並且遇到了一些與IE8有關的困難，主要是什麼都沒有發生！該插件演示設置

我的設置是儘可能接近 - 文件包含在相同的順序，HTML結構變化也非常小，CSS是相同等

在其他瀏覽器IE9 +一切正常，但在ie8中，好像添加圖像的按鈕沒有任何附加內容。

如果我在ie9上傳，然後使用開發工具將文檔類型切換爲ie8，則圖像從服務器成功檢索。

這是我很難顯示完整的代碼文件是不幸的是相當令人費解，不過頁面位於： http://www.yoursplash.co.uk/index.php?route=product/product&product_id=108

，這是有關文件上傳幾乎一切：

這些都是我包括在此爲了得到這些文件的插件工作

<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script> 
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script> 
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script> 
<script src="catalog/view/javascript/jquery/blueimp/jquery.iframe-transport.js"></script> 
<script src="catalog/view/javascript/jquery/blueimp/jquery.fileupload.js"></script> 
<script src="catalog/view/javascript/jquery/blueimp/jquery.fileupload-fp.js"></script> 
<script src="catalog/view/javascript/jquery/blueimp/jquery.fileupload-ui.js"></script> 
<script src="catalog/view/javascript/jquery/blueimp/jquery.fileupload-jui.js"></script> 

這個我是我自己實現的插件

'use strict'; 
$(document).on('ready', function() { 
    $.ajax({ 
     url: '/index.php?route=product/userimage&usetype=get', 
     dataType: 'json', 
     context: $('#fileupload')[0] 
    }).done(function (result) { 
     $(this).fileupload('option', 'done').call(this, null, {result: result}); 
     if ($('#filesContainer > .template-download').length > 0) 
     { 
      $('a[href="#user-upload"]').removeClass('selected').siblings('a[href="#user-photos"]').addClass('selected'); 
      $('#user-upload').hide().siblings('#user-photos').fadeIn(); 
     }; 
    }); 
}); 

$('#fileupload').fileupload(
{ 
    url: '/index.php?route=product/userimage&usetype=put', 
    type: 'POST', 
    maxFileSize: 5000000, 
    fileInput : '#imgUp', 
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, 
    process: [ 
     { 
      action: 'load', 
      fileTypes: /^image\/(gif|jpeg|png)$/, 
      maxFileSize: 5000000 // 20MB 
     } 
    ], 
    filesContainer: '#filesContainer' 
}) 
.bind('fileuploadadded', function (e, data) 
{ 
    $('a[href="#user-upload"]').removeClass('selected').siblings('a[href="#user-photos"]').addClass('selected'); 
    $('#user-upload').hide().siblings('#user-photos').fadeIn(); 
}) 
.bind('fileuploadcompleted', function (e, data) 
{ 
    return $('#filesContainer .uploadedImage').draggable({ containment : 'document', revert : true, appendTo : 'body', helper: function(e,ui){ return $('<img/>',{ src : $(e.target).data('src')}).css('width','150px'); } }).tooltip({ tooltipClass : 'image-gallery-tooltip' , position : { at: 'bottom center'} }); 
}); 

這是我實現插件的HTML

<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data"> 
      <!-- Redirect browsers with JavaScript disabled to the origin page --> 
      <noscript><input type="hidden" name="redirect" value="http://blueimp.github.com/jQuery-File-Upload/"></noscript> 
      <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> 
      <div class="row fileupload-buttonbar"> 
       <div class="span7" style="height:30px;"> 
        <p style="float:left;display:block;width:480px;margin-right:10px;padding:5px;">Select images from your computer and once uploaded you may use them in your design</p> 
        <!-- The fileinput-button span is used to style the file input field as button --> 
        <span class="btn btn-success fileinput-button"> 
         <i class="icon-plus icon-white"></i> 
         <span>Add images..</span> 
         <input type="file" name="files[]" id="imgUp" multipart> 
        </span> 
       </div> 
       <!-- The global progress information --> 
       <div class="span5 fileupload-progress fade"> 
        <!-- The global progress bar --> 
        <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> 
         <div class="bar" style="width:0%;"></div> 
        </div> 
        <!-- The extended global progress information --> 
        <div class="progress-extended">&nbsp;</div> 
       </div> 
      </div> 
      <!-- The loading indicator is shown during file processing --> 
      <div class="fileupload-loading"></div> 
     </form> 

任何援助將greatfully接受 - 我接近了撕裂我的頭髮與這一個，因爲似乎沒有任何好的理由，它不工作！

Answer 1

對於遇到與我在工作時相同的問題的任何人，問題與BlueImp File Uploader無關，而是IE9的安全功能，該功能不允許在文件上傳按鈕上進行程序化「點擊」 。

問題的實際原因是我隱藏了表單輸入，因此我可以展示自己的樣式「按鈕」並使用jQuery觸發輸入點擊 - 我的解決方案是將表單輸入的不透明度設置爲0使用CSS，然後使用絕對定位將其放在我的'漂亮'按鈕上。