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>

任何帮助都会得到很好的接受 - 我很接近用这个来撕掉我的头发，因为似乎没有任何好的理由让它不起作用！

Answer 1

对于遇到与我在处理此问题时遇到的相同问题的任何人来说，问题与BlueImp文件上传器无关，而是与IE的安全功能有关。 9，不允许对文件上传按钮进行程序化“点击”。

问题的实际原因是我隐藏了表单输入，以便我可以呈现自己的样式“按钮”并使用jQuery触发输入点击 - 我的解决方案是将表单输入设置为不透明度0使用CSS，然后使用绝对定位将其放在我的“漂亮”按钮上。

Blueimp文件上传IE 8中没有发生任何事情

1 个答案: