javascript - 使用重置默认值的 jQuery 上传图像预览

Question

我正在尝试为用户上传的图片创建上传预览。我已经完成了大部分我想做的事情(多亏了 stackoverflow……大量的复制粘贴和一些调整)但是因为我不了解 JavaScript，所以我无法让它正常工作。

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

    reader.onload = function(e) {
      if (e.target.result.trim().length == 0) {
        $('#serviceImage').attr('src', 'http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png');
      } else {
        $('#serviceImage').attr('src', e.target.result);
      }
    }

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

function uploadPreviewExt(input) {
  if (input.trim().length == 0) {
    var previewSrc = '{{CSS_URL}}/images/placeholder.jpg';
  } else {
    var previewSrc = input;
  }

  $('#serviceImage').attr('src', previewSrc);
}

function resetUploadPreview() {
  if (!$('#previousImage').val()) {
    $('#serviceImage').attr('src', 'http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png');
  } else {
    $('#serviceImage').attr('src', '{{PROD_IMG}}/'.$('#previousImage').val());
  }
}

$("#mainImage").change(function() {
  uploadPreview(this);
});

$('[name="mainImgExt"]').on('change', function() {
  uploadPreviewExt(this.value);
});

$('#clearUpload').on('click', function() {
  $('#mainImage').val('');

  if ($('#imgExt').val().trim().length == 0) {
    resetUploadPreview();
  } else {
    uploadPreviewExt($('#imgExt').val());
  }
});

$('#clearUploadExt').on('click', function() {
  $('#imgExt').val('');

  if (!$('#mainImage').val()) {
    resetUploadPreview();
  } else {
    uploadPreview($('#mainImage'));
  }
});

pointer {
  cursor: pointer;
}

img.placeholder {
  width: 100px;
  height: 100px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="form-group p-3 border p-2 rounded m-3">
  <div class="row">
    <div class="col-sm-3 text-center pt-2 border-right">
      <label for="mainImage"><img src="http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png" alt="Placeholder" id="serviceImage" class="placeholder img-thumbnail" aria-describedby="imagePreviewHelp" /></label>
      <small id="imagePreviewHelp" class="form-text text-muted">Preview could appear stretched</small>
    </div>
    <div class="col">
      <label for="mainImage">Image</label>
      <div class="input-group mb-3">
        <input type="file" class="form-control border p-1" id="mainImage" name="mainImage" />
        <div class="input-group-append">
          <span class="input-group-text bg-warning text-danger pointer" id="clearUpload">X</span>
        </div>
      </div>
      <div class="input-group mb-3">
        <input type="text" class="form-control" id="imgExt" name="mainImgExt" placeholder="Externel Image" aria-describedby="imageHelp" />
        <div class="input-group-append">
          <span class="input-group-text bg-warning text-danger pointer" id="clearUploadExt">X</span>
        </div>
      </div>
      <small id="imageHelp" class="form-text text-muted">Upload a local image <strong>or</strong> link to an external image.</small>
    </div>
  </div>
</div>

View on JSFiddle

涉及到很多 JavaScript(超出我的舒适区，因为我根本不知道)。

JavaScript 可以遇到两种 HTML 版本。这取决于用户是添加服务还是编辑服务。表单是在 TWIG 的帮助下动态生成的。

在JSFiddle中，有一个版本的表单的图片上传部分(如果是添加服务)下面是编辑服务的版本。 (添加了隐藏的输入字段“previousImage”，预览是当前图像而不是占位符)

    <div class="form-group p-3 border p-2 rounded">
        <div class="row">
            <div class="col-sm-3 text-center pt-2 border-right">
                <label for="mainImage"><img src="https://logismarketmx.cdnwm.com/ip/eve-maquinaria-mantenimiento-para-gruas-mantenimiento-de-gruas-987423-FGR.jpg" alt="Vinyl" id="serviceImage" class="placeholder img-thumbnail" aria-describedby="imagePreviewHelp" /></label>
                <input type="hidden" name="previousImage" id="previousImage" value="eve-maquinaria-mantenimiento-para-gruas-mantenimiento-de-gruas-987423-FGR.jpg" />
                <small id="imagePreviewHelp" class="form-text text-muted">Preview could appear stretched</small>
            </div>
            <div class="col">
                <label for="mainImage">Image</label>
                <div class="input-group mb-3">
                    <input type="file" class="form-control border p-1" id="mainImage" name="mainImage" />
                    <div class="input-group-append">
                        <span class="input-group-text bg-warning text-danger pointer" id="clearUpload">X</span>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="imgExt" name="mainImgExt" placeholder="Externel Image" aria-describedby="imageHelp" />
                    <div class="input-group-append">
                        <span class="input-group-text bg-warning text-danger pointer" id="clearUploadExt">X</span>
                    </div>
                </div>
                <small id="imageHelp" class="form-text text-muted">Upload a local image <strong>or</strong> link to an external image.</small>
            </div>
        </div>
    </div>

这就是问题的背景。这就是我正在努力解决的问题。

当用户单击红色“X”以清除紧靠左侧的字段时，我需要它。它清除了该字段，但我还想重置上传预览图像。

第二个版本的表单之所以重要，是因为如果用户重置并添加，则图像会更改为占位符(本地上传会发生这种情况，但外部 URL 不会发生这种情况)；但如果用户正在编辑一项服务，则上传预览将重置为之前为该服务设置的图像。

我有我认为应该可以工作的 javascript，但它没有。

    function resetUploadPreview()
    {
        if(!$('#previousImage').val())
        {
            $('#serviceImage').attr('src', '{{CSS_URL}}/images/placeholder.jpg');
        }
        else
        {
            $('#serviceImage').attr('src', '{{PROD_IMG}}/' . $('#previousImage').val());
        }
    }

其背后的逻辑是，如果 ID 为“previousImage”的输入为空(或不存在)，它将显示占位符，但如果它确实有值，我们将使用它的值(文件名)来显示此图像。

但它并没有这样做，清除本地文件上传会将图像重置为占位符，无论 previousImage 是否已填充，并且外部 url 根本不会清除。

我想实现的另一个功能是，如果两个字段都已填写(本地和外部)，那么清除一个将在预览中显示另一个图像。

抱歉，如果这看起来很简单，逻辑对我来说似乎很简单，但我似乎无法让它工作，而且我不知道我错过了什么......在我看来一切都在它应该工作的地方，但是它只是没有。

编辑时它不会重置为之前的图像...它根本不会重置。控制台给我以下错误

    TypeError: "../design/variant/productImages/".$ is not a function

它导致的代码行是:

    function resetUploadPreview()
    {
        if(!$('#previousImage').val())
        {
            $('#serviceImage').attr('src', '{{CSS_URL}}/images/placeholder.jpg');
        }
        else
        {
            // This is the line that makes that error
            $('#serviceImage').attr('src', '{{PROD_IMG}}/' . $('#previousImage').val());
        }
    }

添加新服务时，如果您先添加本地镜像，然后再添加外部图像，它会正常显示外部图像预览。但是一旦你清除外部图像，它应该显示本地镜像(因为它已被填充)但它根本不会改变预览。并且控制台没有显示任何警告/错误。

我做错了什么？

Answer 1

干得漂亮!
我做了两个调整:

1. 在 JavaScript 中，string concatenation是通过使用 + 符号执行的，而不是 . 符号。 (因此您引用了 TypeError 消息。)我相应地更改了 resetUploadPreview() 中的代码。

2. uploadPreview() 函数不需要 jQuery 对象，但会传递一个 jQuery 对象以在清除外部图像字段时恢复主图像。我将其改为传递 DOM 元素:$('#mainImage')[0] 而不是 $('#mainImage')。有关详细信息，请参阅 What does $(selector)[0] mean in jQuery?

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

    reader.onload = function(e) {
      if (e.target.result.trim().length == 0) {
        $('#serviceImage').attr('src', '//catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png');
      } else {
        $('#serviceImage').attr('src', e.target.result);
      }
    }

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

function uploadPreviewExt(input) {
  if (input.trim().length == 0) {
    var previewSrc = '{{CSS_URL}}/images/placeholder.jpg';
  } else {
    var previewSrc = input;
  }

  $('#serviceImage').attr('src', previewSrc);
}

function resetUploadPreview() {
  if (!$('#previousImage').val()) {
    $('#serviceImage').attr('src', 'http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png');
  } else {
    $('#serviceImage').attr('src', '{{PROD_IMG}}/' + $('#previousImage').val());
  }
}

$("#mainImage").change(function() {
  uploadPreview(this);
});

$('[name="mainImgExt"]').on('change', function() {
  uploadPreviewExt(this.value);
});

$('#clearUpload').on('click', function() {
  $('#mainImage').val('');

  if ($('#imgExt').val().trim().length == 0) {
    resetUploadPreview();
  } else {
    uploadPreviewExt($('#imgExt').val());
  }
});

$('#clearUploadExt').on('click', function() {
  $('#imgExt').val('');

  if (!$('#mainImage').val()) {
    resetUploadPreview();
  } else {
    uploadPreview($('#mainImage')[0]);
  }
});

pointer {
  cursor: pointer;
}

img.placeholder {
  width: 100px;
  height: 100px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="form-group p-3 border p-2 rounded m-3">
  <div class="row">
    <div class="col-sm-3 text-center pt-2 border-right">
      <label for="mainImage"><img src="http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png" alt="Placeholder" id="serviceImage" class="placeholder img-thumbnail" aria-describedby="imagePreviewHelp" /></label>
      <small id="imagePreviewHelp" class="form-text text-muted">Preview could appear stretched</small>
    </div>
    <div class="col">
      <label for="mainImage">Image</label>
      <div class="input-group mb-3">
        <input type="file" class="form-control border p-1" id="mainImage" name="mainImage" />
        <div class="input-group-append">
          <span class="input-group-text bg-warning text-danger pointer" id="clearUpload">X</span>
        </div>
      </div>
      <div class="input-group mb-3">
        <input type="text" class="form-control" id="imgExt" name="mainImgExt" placeholder="Externel Image" aria-describedby="imageHelp" />
        <div class="input-group-append">
          <span class="input-group-text bg-warning text-danger pointer" id="clearUploadExt">X</span>
        </div>
      </div>
      <small id="imageHelp" class="form-text text-muted">Upload a local image <strong>or</strong> link to an external image.</small>
    </div>
  </div>
</div>