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

Question

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

我的问题是：有什么方法可以完全删除之前图片中的样式，以便重新计算下一张上传的图片？我在删除按钮单击功能中添加了$('#logoPreview').removeAttr('style'); ，样式属性实际上已在 HTML 中删除，但如果您检查元素，样式将保留并应用于下一个上传的图像。在 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();
});

Answer 1

我明白了！

事实证明，Chrome 和 Firefox '读取'这段代码的顺序是不一样的。 Chrome 是从上到下进行的，而在 Firefox 中它是异步的，所以：

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

在我获得上传图像的宽度后发生在 Firefox 中。这就是我解决它的方法。解决方案是在加载该图像后开始执行 ifs，并且在删除按钮中甚至不需要 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