Блог

Главная - Вопросы по программированию - Как проверить, является ли URL-адрес изображением с выборкой в js?

Как проверить, является ли URL-адрес изображением с выборкой в js?

#javascript #image #xmlhttprequest #fetch

Вопрос:

У меня проблема с кодом, чтобы проверить, является ли URL-адрес изображением.

На самом деле, у меня есть этот код:

 var result = document.getElementById("result")
document.getElementById("someForm").addEventListener("submit",(event)=>{
  event.preventDefault()
  result.textContent = "Image Test"
  var img = document.createElement("img")
  img.setAttribute("src",imageUrl.value)
  img.addEventListener("load",(event)=>{
    result.textContent = "Image ok"
    setTimeout(()=>{
      result.textContent = "Waiting for imageUrl..."
    },2000)
  })
  img.addEventListener("error",(event)=>{
    result.textContent = "Link is not an image"
    setTimeout(()=>{
      result.textContent = "Waiting for imageUrl..."
    },2000)
  })
}) 
 input[type="url"] {
  width:100%;
} 
 <form id="someForm">
  <label for="imageUrl">Enter image url here:</label>
  <br/>
  <input type="url" id="imageUrl">
  <br/>
  <input type="submit">
</form>
<p id="result">Waiting for imageUrl...</p>

Но когда я попробовал это с помощью fetch или XMLHttpRequest, я получил ошибку:

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

Вы знаете, как это сделать с помощью fetch?
Спасибо

Комментарии:

1. Ваш код работает нормально, можете ли вы поделиться URL-адресом, который вы пробовали, который может воспроизвести проблему?

2. вам понадобится какой-то прокси-сервер CORS для извлечения фактических данных из удаленного источника. Это не то, что можно решить в одиночку с помощью fetch или xmlhttprequest. это проблема/ограничение CORS

3. Хорошо, спасибо за ваши ответы, чтобы уточнить, что я хочу, это получить любой URL-адрес, который может предоставить пользователь, а затем проверить, существует ли URL-адрес и является ли формат изображения одним из разрешенных форматов. Мой код работает, но я не могу отобразить индикатор выполнения, проверить ответ заголовка или какие-либо дополнительные мысли в этом роде. На самом деле, моя страница находится на gh-страницах

Метки: ,