简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
사용자가 이미지를 제출할 때 이미지의 "갤러리"를 동적으로 업데이트할 수 있습니까?
P粉715228019
P粉715228019 2024-02-04 11:28:23
0
1
517

저는 할아버지의 사진을 모두 모아놓은 웹사이트를 만들고 있어요. 제가 모든 사진을 가지고 있지 않고 다른 사람들이 오고 갈 것이기 때문에 그들이 사진을 제출하고 그 사진의 "데이터베이스"를 볼 수 있는 웹사이트가 있으면 좋겠다고 생각했습니다.

현재 저는 InfinityFree 웹사이트와 github 웹사이트를 운영하고 있습니다. InfinityFree는 훌륭한 편집기를 갖춘 웹 플랫폼을 제공하는 데는 매우 능숙하지만, 저는 평생 동안 서버측 문제(예: 사용자가 파일을 제출하는 방법과 파일을 보는 방법)를 파악할 수 없습니다. 둘 다 같은 코드인데 InfinityFree에서는 사용할 수 없는 node.js를 사용해 보았는데, 그래서 지금은 그대로 두고 코드를 github로 옮겼습니다.

제가 검색한 결과 의미 있는 답변이 하나도 나오지 않아서 어디로 가야할지 모르겠습니다. 경로를 따라 사진을 가져오고 저장한 다음 웹사이트에 표시하는 방법을 배워야 합니까?

현재 제 코드입니다. 홈페이지의 기본 뼈대입니다. 이제 사용자가 선택한 이미지를 표시하는 것이 전부입니다. 

<!doctype html>
<html>
<head>
    <div class="header">
        <h1>Welcome!</h1>
        <p>Here is a site to view and submit photos of _________</p>
    </div>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
    body {
        font-family: Arial;
        margin: 0;
    }
        
    .header {
        padding: 70px;
        text-align: center;
        background: #663399;
        color: white;
        position: relative;
        top: -35px;
    }
            
    .header h1 {
        font-size: 65px;
        margin-top: 0;
        position: relative;
        top: 0px;
    }
    
    .header p {font-size: 25px;}

    .content {padding:20px;}
    </style>
</head>
    
<body>
    <script>
    function handleImageUpload() 
    {
        var image = document.getElementById("upload").files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
        document.getElementById("display-image").src = e.target.result;
        }
        reader.readAsDataURL(image);
    } 
    </script>
    
    <input type="file" onchange="handleImageUpload()" id="upload" multiple />
    <img id="display-image" src="#" alt="your image" />

</body>
</html>````


I am just struggling to see how I have not found a useful video, website, or text discussing how to do this.
It seems as though this should be well-documented and/or easy to implement.
Maybe I am just crazy.

P粉715228019
P粉715228019

모든 응답(1)
P粉713846879
P粉7138468792024-02-05 09:10:33 1층

이것은 mongodb에서 이미지를 업로드하고 검색하는 방법

에 대한 가이드입니다.

그렇다면 풀스택 호스팅 플랫폼이 필요합니다. Cyclic(사용자 친화적이고 무료) )

을 추천합니다.

MongoDb에 업로드하는 모든 이미지는 웹사이트에 표시됩니다. 원하는 경우 업로드 양식을 별도의 페이지로 만들어 작동 방식을 보여줄 수도 있습니다

Firebase를 사용하는 또 다른 방법은 여기

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！