使用 jquery/php/html 更改带有文件上传值的 img src


Changing img src with the fileupload value using jquery/php/html

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

谢谢

我相信

这就是你要找的:

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);
  }
}

您可能还有兴趣阅读其他示例,例如此示例。

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