JavaScript FileReader大量结果

Question

我有一个FileReader，可以让用户将文件（图像）上传到我的网站。

这是执行阅读的代码：

$("input[type='file']").change(function(e) {

    var buttonClicked = $(this);

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
            img.src = reader.result;                

            console.log(reader.result);

        }
        reader.readAsDataURL(file);
    }
});

一切都很好，直到我试图打印出我的结果。我用这个文件例如：

当我console.log()结果时，它会吐出超过95000个字符。

此图片的大小与我接收到我网站的图片大小差不多。

我希望将这些图像存储在数据库中，因此我想知道如何使用非常长的图像源来实现这一点。有没有办法缩短这个或以不同的方式获得图像路径？

我更好奇为什么他们这么长时间，但如果有人提示存储这些（每个用户100个，500多个用户），那也很好！ / p>

谢谢 -

Answer 1

您想要将文件上传到某种类型的服务器（提供javascript的后端），然后从那里开始

1. 验证文件
2. 将文件存储在某个地方的物理服务器（或云端）上
3. 在数据库中添加一个条目，该条目将上传的文件路径或ID与刚刚上传的用户相关联（以便以后可以在需要时检索）

基本上，您不会将图像存储在数据库中，而是将其存储在某个文件共享/云主机上，而只是存储以后下载/检索图像所需的内容。

Answer 2

将文件存储为...文件。

您需要使用FileReader的toDataURL()方法的用例非常少，所以每次使用它时，都应该问问自己为什么需要它。

在你的情况下：

• 要在页面中显示图像。那么请不要使用FileReader，而是以url的形式创建指向文件的直接指针，仅适用于此会话。这可以使用URL.createObjectURL(File_orBlob)方法实现。
• 将此图像存储在服务器上。不存储~37% bigger base64 version，直接将文件作为文件发送和存储（多部分）。这可以通过FormData API轻松实现。

inp.onchange = function(){
  var file = this.files[0];
  if(file.type.indexOf('image/') !== 0){
    console.warn('not an image');
    }
  var img = new Image();
  img.src = URL.createObjectURL(file);
  // this is not needed in this case but still a good habit
  img.onload = function(){
    URL.revokeObjectURL(this.src);
    };
  document.body.appendChild(img);
  }

// not active but to give you da codez
function sendToServer(){
  var file = inp.files[0];
  var form = new FormData();
  // here 'image' is the parameter name where you'll retrieve the file from in the request
  form.append('image', file); 
  form.append('otherInfo', 'some other infos');
  var xhr = new XMLHttpRequest();
  xhr.open('post', 'yourServer/uploadPage')
  xhr.onload = function(){
    console.log('saved');
    };
  xhr.send(form);
  }

<input type="file" id="inp">

如果您需要PHP代码来检索此请求的文件形式：

if ( isset( $_FILES["image"] ) ){
  $dir = 'some/dir/';
  $blob = file_get_contents($_FILES["image"]['tmp_name']);
  file_put_contents($dir.$_FILES["image"]["name"], $blob);
}