且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Blueimp文件上传没有发生在IE 8中

更新时间:2023-12-04 20:54:04

对于遇到同样的问题,在这个问题上,这个问题与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.