Question

我创建了一个输入type = file的表单。从此表单提交信息后，转到localstorage并添加到某个块。我可以添加文字，但不能添加图像，不能添加文件名，而是添加真实图像。

因此，结果应该看起来像div里面有一些文本信息，而来自用户pc的真实图像

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

找到的this blog这个问题，有一个关于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!"
            }
        });

}

Answer 2

编写自己的代码以便在Javascript中上传文件和图像是一个众所周知的问题。

大多数人要解决的问题是在后端连接Paperclip（https://github.com/thoughtbot/paperclip）。

因此，当用户上传图像/文件时，它将直接进入后端，您需要进行API提取以将其保存在本地存储中。

Answer 3

我会推荐LocalForage。它是一个异步数据存储，具有类似localStorage的简单API。它允许开发人员存储除字符串之外的许多类型的数据。使用IndexedDB作为第一选择，它可以存储＆＃34; Clonable Structured Data＆＃34;在这种情况下，包括数组的对象甚至文件和blob。

IndexedDB是要走的路。使用localStorage时，您只能保存字符串。您需要FileReader来序列化字符串，这会增加大小和页面加载时间。

这是一个例子

localforage.setItem('somekey', file).then(function (value) {
  // Do other things once the value has been saved.
  console.log(value);

  // This will be a valid blob URI for an <img> tag.
  var imageURI = window.URL.createObjectURL(value);
}).catch(function(err) {
  // This code runs if there were any errors
  console.log(err);
});

从输入中保存并加载图像

3 个答案: