javascript - 将上传的图片存储在 sessionStorage 中，需要时显示

Question

首先，我必须解释一下我是一个完全的菜鸟，这是我的培训项目（我将数据存储在 sessionStorage 中的原因。我正在制作一个应用程序来上传信息，将其存储在 sessionStorage 中，然后在浏览器。一切正常，除了图像。

我的理解是必须更改图像，因为现在它被保存为数组。我有一个在网上找到的代码示例，但我不知道把它放在哪里。

                const input = document.querySelector('#images');
input.addEventListener('change', (e) => {
            
                const images = input.files;

                if (files.length < 3 || files.length > 10) {
                    alert(`Only more than 3 and less than 10 files are allowed to upload`);
                    input.value = null;
                    return;
                }
              //example found in web
              /*  let fileList = e.target.files;
                let files = {};
                let index = 0;
                for(let file of files) {
                files[index] = file;
                index ++;
                }

                // Now iterate object instead of array
                Object.keys(files).forEach( key => {

                    let reader = new FileReader();

                    reader.addEventListener("load", () =>{  
                        sessionStorage.setItem(`img${key}`,reader.result)
                    })
                    reader.readAsDataURL(files[key]);

                }); */

    
        });

              

    
        
    const addPizza = (ev)=>{

            ev.preventDefault();

            

            if (document.getElementById("name").value.length == 0 || document.getElementById("heat").value.length == 0 || document.getElementById("price").value.length == 0
            || document.getElementById("toppings1").value.length == 0 || document.getElementById("toppings2").value.length == 0)
            {
            alert("Please fill the required fields")
            } else {
                
                let pizza = {
                    pizzaName: document.getElementById('name').value,
                    pizzaPrice: document.getElementById('price').value,
                    pizzaHeat: document.getElementById('heat').value,
                    pizzatoppings1: document.getElementById('toppings1').value,
                    pizzatoppings2: document.getElementById('toppings2').value,
                    pizzatoppings3: document.getElementById('toppings3').value,
                    pizzatoppings4: document.getElementById('toppings4').value,
                    pizzatoppings5: document.getElementById('toppings5').value,
                    pizzaImages: document.getElementById(`images`).value,  
} 

       

                document.querySelector('form').reset();

                //pasichekint consoleje
                //console.warn('added' , {pizzas} );
            
                sessionStorage.setItem('MyPizzaList', JSON.stringify(pizza) );

                


            
            }




            disPizza ()
            
            
        }//else end



            
            

        function disPizza (){
            console.log(JSON.parse(sessionStorage.getItem('MyPizzaList')));
            let{pizzaName, pizzaPrice, pizzaHeat, pizzatoppings1, pizzatoppings2, pizzatoppings3, pizzatoppings4, pizzatoppings5, pizzaImages} = JSON.parse(sessionStorage.getItem('MyPizzaList'));
            var outputName = document.getElementById('outputName');
            outputName.innerHTML = `<p> ${pizzaName} </p>`; 

            var outputPrice = document.getElementById('outputPrice');
            outputPrice.innerHTML = `<p> ${pizzaPrice} </p>`; 

            var outputHotness = document.getElementById('outputHotness');
            outputHotness.innerHTML = `<p> ${pizzaHeat} </p>`; 

            var outputToppings = document.getElementById('outputToppings');
            outputToppings.innerHTML = `<p> ${pizzatoppings1},${pizzatoppings2},${pizzatoppings3},${pizzatoppings4},${pizzatoppings5} </p>`; //fix the empty comma

            var outputImage = document.getElementById('outputImage');
            outputImage.innerHTML = `<p> ${pizzaImages} </p>`; 


        }//addpizza end

            document.addEventListener('DOMContentLoaded', ()=>{
                
            document.getElementById('btn').addEventListener('click', addPizza); 


               
                
      

    });

                 

  
  body {
    background: #e65454;
    color: #292929;
    font-size: large;
    font-family: 'Roboto Mono', monospace;
  }
  
  div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-family: 'Roboto Mono', monospace;
  }

  input {
      margin: 8px;
      padding: 10px 100px 10px 5px;
      font-size: large;
      font-family: 'Roboto Mono', monospace;
      
  }

  button {
      margin: 8px;
      padding: 10px;
      font-family: 'Roboto Mono', monospace;
      font-size: large;
  }

  table, td, th {
    border: 1px solid black;

    border-collapse: collapse;
  }
  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="attributes/style.css">
    <title></title>
</head>
<body>


    <div>
        <form>

           
            <input type="text" id="name" name="name" placeholder="name of the pizza:*" 
                required size="20" maxlength="30"> <br> <!--unique has to to be made in JS-->
             
        
            <input type="number" id="price" name="price" placeholder="price:*" 
                required size="20" min="0" max="999" step="0.01" oninput="validity.valid||(value='');"><br> <!--done-->

        
            <input type="number" id="heat" name="heat" placeholder="hotness:" 
                size="20" min="1" max="3" step="1" oninput="validity.valid||(value='');"><br> <!--done-->

            <label for="toppings"><strong>Add Toppings:</strong></label><br>

                <input type="text" id="toppings1" name="topping1" placeholder="topping 1*"
                required size="20" maxlength="30"><br>

                <input type="text" id="toppings2" name="topping2" placeholder="topping 2*"
                required size="20" maxlength="30"><br>

                <input type="text" id="toppings3" name="topping3" placeholder="topping 3"
                 size="20" maxlength="30"><br>

                <input type="text" id="toppings4" name="topping4" placeholder="topping 4"
                size="20" maxlength="30"><br>  
                
                
                <input type="text" id="toppings5" name="topping5" placeholder="topping 5"
                size="20" maxlength="30"><br> <!-- kinda done, needs to figure out id/name/ while doing JS-->


            <label for="images"><strong>Upload photos:</strong></label>
            <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png" multiple> <br> <!--done-->
        
            <button id="btn" >Add Pizza</button>   <p>required fields indicated by *</p>


        </form> 

        <h2>Pizza menu</h2> 


        <table style="width:100%">
            <tr>
              <th>Name</th>
              <th>Price</th>
              <th>Hotness</th>
              <th>Toppings</th>
              <th>Photos</th>
            </tr>
            <tr>
              <td id="outputName"></td>
              <td id="outputPrice"></td>
              <td id="outputHotness"></td>
              <td id="outputToppings"></td>
              <td id="outputImage"></td>
             
            </tr>

          </table>

            <div id="output"> 
                
            </div>

    </div>  
<script src="attributes/script.js"></script>       
</body>

</html>

标签： javascripthtmlcssimagesession-storage