Blueimp文件上传没有发生在IE 8中 [英] Blueimp File Upload nothing happening in IE 8

问题描述

我正在使用一个项目的blueimp文件上传插件，并且遇到了一些IE8的困难，主要是什么都没有发生！

我的设置尽可能接近插件演示设置 - 文件包含在相同的顺序，HTML结构只有很小的变化，CSS是相同的等。

p>

在其他浏览器+ ie9中，一切都按预期工作，但是在ie8中，添加图像的按钮没有附加任何内容。

如果我在ie9中上传，然后使用开发工具将文档类型切换为ie8，则图像将从服务器成功检索到。

我很难显示完整的代码，因为该文件是不幸的相当令人费解，但页面位于这里：
http://www.yoursplash.co.uk/index.php?route=product/product&product_id=108

这些是我包括在这个顺序的文件，以获得插件work

 < script src =http://blueimp.github.com/JavaScript-Templates/tmpl .min.js>< /脚本> 
< 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）。调用（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（）; 
}; 
}） ; 
}）; 
 $ b $（'＃fileupload'）。fileupload（
 {
 url：'/index.php?route=product/userimage&usetype=put'，
类型：'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，数据）
 {
 $（'a [href =＃user-upload]'）。removeClass（'selected'）。siblings（'a [href =＃user-photos]' ）.addClass（'selected'）; 
 $（'＃user-upload'）。hide（）。siblings（'＃user-photos'）。fadeIn（）; 
}）
 .bind（'fileuploadcompleted'，函数（e，data）
 {
 return $（'＃filesContainer .uploadedImage'）。draggable（{containment：'document'，revert：true，appendTo：'身体，助手：福nction（e，ui）{return $（'< img />'，{src：$（e.target）.data（'src'）}）。css（'width'，'150px'）; }}）。tooltip（{tooltipClass：'image-gallery-tooltip'，position：{at：'bottom center'}}）; 
}）; 
  

这是我执行插件的HTML

 < form id =fileuploadaction =// jquery-file-upload.appspot.com/method =POSTenctype = 多部分/格式数据 > 
 <！ - 将JavaScript禁用的浏览器重定向到原始网页 - > 
< noscript>< input type =hiddenname =redirectvalue =http://blueimp.github.com/jQuery-File-Upload/>< / noscript> 
 <！ - 文件上传按钮栏包含添加/删除文件和开始/取消上传的按钮 - > 
< div class =row fileupload-buttonbar> 
< div class =span7style =height：30px;> 
 
 <！ - 文件输入按钮跨度用于将文件输入字段设置为按钮 - > 
< span class =btn btn-success fileinput-button> 
< i class =icon-plus icon-white>< / i> 
< span>添加图片..< / span> 
< input type =filename =files []id =imgUpmultipart> 
< / span> 
< / div> 
 <！ - 全局进度信息 - > 
< div class =span5 fileupload-progress fade> 
 <！ - 全球进度条 - > 
< div class =progress progress-success progress-striped activerole =progressbararia-valuemin =0aria-valuemax =100> 
< div class =barstyle =width：0％;>< / div> 
< / div> 
 <！ - 扩展的全局进度信息 - > 
< div class =progress-extended>& nbsp;< / div> 
< / div> 
< / div> 
 <！ - 在文件处理期间显示加载指示符 - > 
< div class =fileupload-loading>< / div> 
< / form> 
  

任何帮助都会被很好地接受 - 我已经接近撕掉我的头发了，因为那里似乎没有任何好的理由，它不工作！

解决方案

对于遇到同样的问题，在这个问题上，这个问题与BlueImp File Uploader没有特别的关系，而是IE< 9，它不允许程序化的点击文件上传按钮。

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

I am using the blueimp file upload plugin on a project and am running into some difficulties with IE8, mainly that nothing is happening!

My setup is as close as possible to the plugins demo settings - files are included in the same order, html structure varies only very slightly, css is identical etc.

In other browsers + ie9 everything works as expected, but in ie8 it's as though the button to add an image has nothing attached to it.

If I upload in ie9 then switch document type to ie8 using dev tools, the image is retrieved from the server successfully.

It's hard for me to show the full code as the document is unfortunately quite convoluted however the page is located here: http://www.yoursplash.co.uk/index.php?route=product/product&product_id=108

and this is pretty much everything that is related to the file upload:

these are the files i am including in this order to get the plugin to work

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

This is my own implementation of the plugin

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

this is the HTML of my implementation of the plugin

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

Any assistance would be greatfully received - I'm close to tearing my hair out with this one because there doesnt seem to be any good reason for it not to work!

解决方案

For anyone experiencing the same issues as I had when I was working on this, the problem was not related specifically to the BlueImp File Uploader but a security feature of IE < 9, which disallows programmatic 'clicks' on file upload buttons.

The actual cause of the problem was that I had hidden the form input so that I could present my own styled 'button' and triggered the click on the input using jQuery - my solution was to instead set the form inputs' opacity to 0 using CSS, and then position it over my 'pretty' button using absolute positioning.

这篇关于Blueimp文件上传没有发生在IE 8中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！