保存并加载输入图像

Question

我创建了一个输入类型=文件的表单。从此表单提交信息后，将转到本地存储并添加到某个块。我可以添加文本，但无法添加图像，不是文件名，而是真实图像。

所以结果应该看起来像 div，里面有一些文本信息和来自用户电脑的真实图像

let outputs = $('.output-text');
  let idMask = "outputs_";
  function showArticle(){
    let isLen = localStorage.length;
    if(isLen > 0){
        for(let i = 0; i < isLen; i++){
            let key = localStorage.key(i);
            if(key.indexOf(idMask) == 0){
                $('<div></div>').addClass('student-card')
                    .attr('data-itemId', key)
                    .html(localStorage.getItem(key))
                    .prependTo(outputs);
            }
        }
    }
}

showArticle();


$(".load-form").on('submit', function(event) {
    event.preventDefault();

    let groupName = $(this).find('#select-group option:selected').text();
    let pupilName = $(this).find('#select-pupil option:selected').text();
    let message = $(this).find('#textarea').val();
    let inputImg = $(this).find('#file-name').text();
    let addArticle = '<div class = "student-card__group">Group: <span class = "group-name_js">'+groupName'+
 '</span></div><div class = "student-carg__img">'+inputImg+'</div>';

    let newId = 0;
    outputs.children().each(function(index, el){
        let oldId = $(el).attr('data-itemId').slice(8);
        if(oldId > newId)
            newId = oldId;
    })
    newId++;

    localStorage.setItem(idMask+newId, addArticle);

    $('<div></div>').addClass('student-card')
        .attr('data-itemId', idMask+newId)
        .html(addArticle).prependTo(outputs);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class = "load-form" method="get" enctype="multipart/form-data">
    <div class = "load-form-item choose-group">
        <select id = "select-group">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
    </div>
    <div class = "load-form-item">
       <input type = "file">
    </div>
    <div class = "load-form-item load-form-item__submit">
      <input type = "submit">
    </div>
</form>

<div></div>

Answer 1

我错误地认为需要服务器端。有一个关于 codepen 的很好的教程，正是从这个博客找到的这个codepen

<div id="page-wrapper">

<h1>Image File Reader</h1>
<div>
    Select an image file: 
    <input type="file" id="fileInput">
</div>
<div id="fileDisplayArea"></div>

CSS

    html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
}

#page-wrapper {
  width: 600px;
  background: #FFF;
  padding: 1em;
  margin: 1em auto;
  min-height: 300px;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
    margin-top: 0;
}

img {
  max-width: 100%;
}

#fileDisplayArea {
  margin-top: 2em;
  width: 100%;
  overflow-x: auto;
}

JavaScript：

window.onload = function() {

        var fileInput = document.getElementById('fileInput');
        var fileDisplayArea = document.getElementById('fileDisplayArea');


        fileInput.addEventListener('change', function(e) {
            var file = fileInput.files[0];
            var imageType = /image.*/;

            if (file.type.match(imageType)) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    fileDisplayArea.innerHTML = "";

                    var img = new Image();
                    img.src = reader.result;

                    fileDisplayArea.appendChild(img);
                }

                reader.readAsDataURL(file); 
            } else {
                fileDisplayArea.innerHTML = "File not supported!"
            }
        });

}