Question

我想使用上传表单和提交按钮显示图片。

但问题是，我不能让图像出现。

这就是我的所作所为。

function myFunction() {
var x = document.getElementById("myFile").value;
document.getElementById('myImg').src = document.getElementById("myFile").name;

<form>Select a file to upload:
<input type="file" id="myFile" name=filename>
</form>
<button type="button" onclick="myFunction()">Upload This</button>
<img id="myImg" src="">

我只是不知道这有什么问题。

感谢您帮助我。

Answer 1

浏览器不允许javascript完全访问带.value的输入标记的type="file"属性。这是出于安全原因，因此没有本地路径信息可用于javascript。

因此，您无法根据最终用户指定的文件输入值在图像标记上设置.src值。

Answer 2

如果您不想将图像上传到服务器端，则只能在客户端进行此操作。

为你的html（dom）添加一个div：

<div id='bottom'>
    <div id='drag-image' class='holder-file-uploader bottom-asset'> Drag here an image</div>
</div>

添加此javascript：

<script>
    var holder = document.getElementById('drag-image');

    holder.ondragover = function () { return false; };
    holder.ondragend = function () { return false; };
    holder.ondrop = function (event) {
        event.preventDefault && event.preventDefault();     
        //do something with:
        var files = event.dataTransfer.files;
        console.log(files);

        bottomFileAdd(files, 0);
        return false;
   };

//Recursive function to add files in the bottom div
//this code was adapted from another code, i didn't test it
var bottomFileAdd = function (files, i) {
    if(!i) i=0;
    if (!files || files.length>=i) return;

    var file = files.item(i);
    var img = document.createElement('img');

    var bottom = document.getElementById('bottom'); //this string should not be static
    bottom.appendChild(img);    

    var reader = new FileReader();
    reader.onload = function (event) {
        console.log(event.target);
        img.src =  event.target.result;
        bottomFileAdd(files, i+1);
    };

    reader.readAsDataURL(file);
}
</script>

注意：它可能无法在旧浏览器中使用。

我希望它有所帮助。

Answer 3

您尝试将src标记的<img>属性设置为本地文件路径。但是，Web浏览器不会在file://...标记的value属性中公开本地文件URL（<input>）。浏览器实现可能会有所不同例如，Chrome会为您提供虚假路径。

您可以通过FileReader API将图片加载到data URI并通过设置src标记的<img>属性来显示该图片：

function myFunction() {
  var myFile = document.getElementById("myFile");
  if (myFile.files && myFile.files.length) {
    if (typeof FileReader !== "undefined") {
      var fileReader = new FileReader();
      fileReader.onload = function(event) {
        document.getElementById("myImg").src = event.target.result;
      };
      fileReader.readAsDataURL(myFile.files[0]);
    } else {
      alert("Your browser doesn't support the FileReader API.")
    }
  } else {
    alert("No file was selected.")
  }
}

您需要一个相当现代的网络浏览器才能实现此目的：

 Browser  Firefox  Chrome  IE  Opera  Safari
 Version  3.6      7       10  12.02  6.0.2

您可以查看a working sample page。这种图像预览的最终实现应该将<img>元素设置为固定大小，但使用我的函数标记就足以作为一个简单的演示。

使用上传JS显示图像

3 个答案: