jquery - jQuery removeAttr('style')在Firefox和Safari中不起作用

我已经完成了上传图片功能，并使用jQuery确定图片的尺寸，以便在上传图片时将其放入包含div的图片中。当检测到图像时，jQuery应用了一些CSS使它适合div，然后适当地居中，这取决于图像是矩形，正方形还是其他。还有一个删除按钮。问题是，如果我上传一个图像，将其删除然后再上传另一个，则用于前一个图像的CSS会应用于当前图像，从而使它在Firefox和Safari中看起来很奇怪。

我的问题是：有什么办法可以完全删除上一张图片中的样式，以便可以重新计算下一张上载的图片？我在删除按钮单击功能中添加了$('#logoPreview').removeAttr('style');，实际上在HTML中删除了样式attr，但是如果您检查该元素，样式将保留并应用于下一个上载的图像。在Chrome中工作正常，但在Firefox或Safari中工作不正常。

有什么建议么？？

预先感谢！

这是代码：

// Visualize logo
function readURL(input) {
  if (input.files && input.files[0]) {
     var reader = new FileReader();

     reader.onload = function(e) {
        $('#logoPreview').attr('src', e.target.result);

        $('#logoPreviewWrapper').css('display', 'block');
        $('span.button.upload').css('display', 'none');
        $('span.button.remove').css('display', 'block');
        $('idTwo input').css('display', 'none');

        var wLogo = $('#logoPreview').width();
        var hLogo = $('#logoPreview').height();

        // Position & resize square images
        if ( wLogo == hLogo ) {
            $('#logoPreview').css('height', '52px');
            $('#logoPreview').css('width', 'auto');

            var wLogoResize = $('#logoPreview').width();

            $('#logoPreview').css('marginTop', '-26px');
            $('#logoPreview').css('marginLeft', -wLogoResize/2);
        }

        // Position & resize horizontal rectangular images
        if ( wLogo > hLogo ) {
            $('#logoPreview').css('width', '154px');
            $('#logoPreview').css('height', 'auto');

            var hLogoResize = $('#logoPreviewWrapper img').height();

            $('#logoPreview').css('marginTop', -hLogoResize/2);
            $('#logoPreview').css('marginLeft', '-77px');
        }

        // Position & resize vertical rectanglular images
        if ( wLogo < hLogo ) {
            $('#logoPreview').css('height', '52px');
            $('#logoPreview').css('width', 'auto');

            var wLogoResize = $('#logoPreviewWrapper img').width();

            $('#logoPreview').css('marginTop', '-26px');
            $('#logoPreview').css('marginLeft', -wLogoResize/2);
        }
     };

     reader.readAsDataURL(input.files[0]);
  }
}

$('.idTwo input[type="file"]').change(function() {
    readURL(this);
});

// The Remove Button
$('span.button.remove').click(function() {
  $('#logoPreview').removeAttr('style');

  $(this).css('display', 'none');
  $('input[type="number"]').val(1);
  $('#logoPreviewWrapper').css('display', 'none');

  $('.idTwo input').attr('value', '');

  $('span.button.upload').css('display', 'block');
  $('.quantity.buttons_added input[type="number"]').prop('disabled', false);
  $('input[value="-"]').prop('disabled', false);
   updateValues();
});

最佳答案

我知道了！！

事实证明，Chrome和Firefox“读取”此代码的顺序不同。 Chrome浏览器自上而下，在Firefox中都是异步的，因此：

$('#logoPreview').attr('src', e.target.result);

在Firefox中，发生了我获得上传图像的宽度之后的情况。这是我解决的方法。解决方案是在加载该映像之后开始执行ifs，并且甚至在remove按钮中甚至不需要removeAttr(''style)，如下所示：

function readURL(input) {
  if (input.files && input.files[0]) {
     var reader = new FileReader();

     reader.onload = function(e) {
        var logoPreview = $('#logoPreview');
        logoPreview.attr('src', e.target.result);

        logoPreview.on('load', function() {
          $('#logoPreviewWrapper').css('display', 'block');
          $('span.button.upload').css('display', 'none');
          $('span.button.remove').css('display', 'block');
          $('idTwo input').css('display', 'none');

          var wLogo = logoPreview.width();
          var hLogo = logoPreview.height();

          // Position & resize square images
          if ( wLogo == hLogo ) {
              logoPreview.css('height', '52px');
              logoPreview.css('width', 'auto');

              var wLogoResize = logoPreview.width();

              logoPreview.css('marginTop', '-26px');
              logoPreview.css('marginLeft', -wLogoResize/2);
          }

          // Position & resize horizontal rectangular images
          if ( wLogo > hLogo ) {
              logoPreview.css('width', '154px');
              logoPreview.css('height', 'auto');

              var hLogoResize = $('#logoPreviewWrapper img').height();

              logoPreview.css('marginTop', -hLogoResize/2);
              logoPreview.css('marginLeft', '-77px');
          }

          // Position & resize vertical rectanglular images
          if ( wLogo < hLogo ) {
              logoPreview.css('height', '52px');
              logoPreview.css('width', 'auto');

              var wLogoResize = $('#logoPreviewWrapper img').width();

              logoPreview.css('marginTop', '-26px');
              logoPreview.css('marginLeft', -wLogoResize/2);
          }
        });
     };

     reader.readAsDataURL(input.files[0]);
  }
}

$('.idTwo input[type="file"]').change(function() {
    readURL(this);
});

// The Remove Button
$('span.button.remove').click(function() {
  $(this).css('display', 'none');
  $('input[type="number"]').val(1);
  $('#logoPreviewWrapper').css('display', 'none');

  $('.idTwo input').attr('value', '');

  $('span.button.upload').css('display', 'block');
  $('.quantity.buttons_added input[type="number"]').prop('disabled', false);
  $('input[value="-"]').prop('disabled', false);
   updateValues();
});

不管怎么说，还是要谢谢你！！ ：D