Question

我已经制作了一个上传图片功能，并且我使用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();
});

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

jQuery removeAttr（＆＃39; style＆＃39;）在Firefox＆amp;苹果浏览器

1 个答案: