Как изящно избежать «404 не найден» в Javascript, когда клиент вводит неправильное имя файла - PullRequest
Новая
       18

Как изящно избежать «404 не найден» в Javascript, когда клиент вводит неправильное имя файла

0 голосов
/ 27 октября 2019

Пожалуйста, смотрите добавленное редактирование в конце комментариев У меня есть папка на сервере, которая содержит различные JPEG и PNG. Посетитель набирает имя файла в текстовом поле, щелкает область на холсте HTML, и появляется изображение. (ИЛИ, по крайней мере, отключен для другого изображения). См. Код.

Если посетитель неправильно пишет имя файла, Javascript выдает флаг «404 not found ...».

Как можно изящно отвести код «потока», чтобы избежать этогоошибка ... Что-то в результате: «Если содержимое текстового поля не совпадает с именем чего-либо в этой папке .... тогда ничего не делать» * хорошо, я не упомянул, что это ПОЛЬЗОВАТЕЛЬ (клиент)который загружает эти фотографии на мой диск Google ... затем я проверяю их ... и перемещаю их в папку на моем сервере ... так что будет много этих фотографий .... я могу рассмотреть идею выпадающего, но это может быть сложно ... просто будет слишком много фотографий в списке. *

Спасибо. 

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script src="readFileName.js"></script>
</head>

<body>
<input type="text" id="customerArtUploadText" value="Type your clipart name" style="width: 220px; height: 25px;">
<br>
<canvas id="thisCanvas" width="600" height="600" style="border:1px solid #999999;"></canvas>
</body>
</html>
---------------------------------------
window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded () {
    theCanvasApp();
}
function theCanvasApp() {
    var tCanvas = document.getElementById("thisCanvas");
    var tCtx = tCanvas.getContext("2d");
    var imagesToLoad = 0; imagesLoaded = 0;
    var customerArtName = "baseball.png";

    tCanvas.addEventListener('mouseup', function(evt) { var mousePos = doMouseUp(tCanvas, evt);
        currentMouseXcoor = mousePos.x; currentMouseYcoor = mousePos.y; processMousePosition();}, false);

    //customerArtUploadText.addEventListener('input', function(){ readCustomerUploadText(event)}, false);

        var loaded = function(){
            imagesLoaded += 1;
            if(imagesLoaded === imagesToLoad){
                    imagesToLoad = 0;
            imagesLoaded = 0;
            //drawScreen();
        }
        }
    var loadImage = function(url){
            var image = new Image();
            image.addEventListener("load",loaded);
            imagesToLoad += 1;
        image.src = url;
        return image;
            }
    function drawScreen(){
        //THERE IS A 50-PIXEL REGION IN THE UPPER LEFT OF THE CANVAS TO CLICK ON
        customerImageHolder = loadImage("customerArt/" + customerArtName);
        tCtx.drawImage(customerImageHolder, 0, 100, 100, 100);
    }
    function processMousePosition() { processTheClick(); }

    function doMouseUp(navCanvas, evt){
            var rect = navCanvas.getBoundingClientRect();
            return { x: evt.clientX - rect.left, y: evt.clientY - rect.top};}

    function processTheClick(){
        if(currentMouseXcoor >= 1 && currentMouseXcoor <= 50){
            if(currentMouseYcoor >= 1 && currentMouseYcoor <= 50){ readCustomerUploadText();}}
        drawScreen();
    }
    function readCustomerUploadText() { customerArtName = customerArtUploadText.value; alert(customerArtName);}

    var customerImageHolder = loadImage("customerArt/baseball.png");
}
...