Question

对于上下文，我正在尝试创建“点击图片”文件上传器。最初有一个默认图像，然后我单击它。我触发文件上传，用户选择他们想要的图像文件。然后我将设置图像以替换默认值（稍后用它做其他事情）。现在，前端看起来像这样：

<div class="right-preview">
    <input type="image" src="img/logo.png" height="240px" width="240px" ng-click="uploadImage('right-image')" id="upload-right-image"/>
    <input type="file" id="upload-right" style="visibility: hidden">
</div>

单击图像时，会触发上传操作。

$scope.uploadImage = function(side) {
    $image = $('#upload-' + side);
    $fileInput = $('#upload-right');

    $fileInput.change(function(changeEvent) {
    var files = changeEvent.target.files;

    for(var i = 0; i < files.length; i++) {
        file = files[i];
            console.log(file);
        }
    });

    $fileInput.trigger('click');
}

当用户完成挑选文件后触发更改事件时，我有changeEvent并且我知道他们已经选择了他们的文件。每个文件都有一些属性（如名称和大小）但我没有看到任何用于访问原始数据的内容，所以我可以在我的其他元素上设置src。

我是否完全不知道如何获取图像数据，还是有更好的方法来做到这一点？我没有服务器（现在）发布这个。也许有更好的方法来解决这个问题？

Answer 1

此链接可能对您有所帮助 - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

我从该页面获取了一个方法，并添加了一些额外的功能来隐藏文件上传按钮，并让图像占位符触发其点击事件。

＆＃13;

$('#placeholder').click(function() {
  $('#img-upload').trigger('click');
});

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<img width="250" height="250" id="placeholder" src="http://placehold.it/250x250&text='click to upload'">
<input class="hidden" type="file" onchange="previewFile()" id="img-upload">

＆＃13;

从没有服务器的文件输入中检索图像数据

1 个答案: