Blueimp file loading nothing happens in IE 8

Question

I use the plugin to load the blueimp file in the project and run into some difficulties with IE8, mainly that nothing happens!

My setup is as close as possible to the plugin daemon settings - the files are included in the same order, the html structure changes very slightly, css is identical, etc.

In other browsers + ie9, everything works as expected, but in ie8 it is as if the button for adding an image is not attached to it.

If I upload to ie9, then switch the document type to ie8 using the dev tools, the image will be restored from the server successfully.

It’s hard for me to show the full code, because the document, unfortunately, is rather confusing, but the page is here: http://www.yoursplash.co.uk/index.php?route=product/product&product_id=108

and this is almost everything related to file upload:

these are the files that I include in this order to make the plugin 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 plugin implementation

  <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 help would be welcomed - I'm close to tearing my hair out with this, because there seems to be no good reason for it not working!

Answer 1

For those who are experiencing the same problems as before, when I worked on this, the problem was not specifically related to the BlueImp file downloader, but the IE <9 security function, which prohibits software “clicks” on file download buttons.

The actual cause of the problem was that I hid the form input so that I could present my own 'button' style and caused a click on the input using jQuery - my solution was to use CSS instead of the opacity of the input to form 0, and then put it on top of my pretty button using absolute positioning.