使用 jquery/php/html 使用 fileupload 值更改 img src

Question

我正在使用 html fileUpload 组件接受一些文本和图片的 facebook 选项卡，其想法是，当用户在 fileUpload 组件中选择图片时，他们选择的图像在页面上显示为在将图片上传到服务器之前预览图片的方式。我尝试使用 val() 获取图像 url，但出于安全原因，浏览器不会提供本地文件的完整 url。有没有办法使用 php 或 jquery 来做到这一点？

谢谢

Answer 1

我相信this is what you're looking for：

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;

    if (!file.type.match(imageType)) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img);

    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

您可能也有兴趣阅读其他示例，例如 this one。

编辑：此方法依赖于FileReader API，因此正如您所指出的，它不适用于 IE9，但我认为否则不可能。
归根结底，您是否需要 IE9 兼容性？您可能会发现添加适用于除少数用户群之外的所有用户群的功能是可以接受的。