显示图像使用上传JS

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

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

这就是我所做的。

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="">

我只是不知道什么似乎是这个问题。

谢谢你帮助我。

来源

2014-03-01 user3335903

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

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

来源

2014-03-01 09:08:20 jfriend00

那么我能做些什么来解决这个问题？ – user3335903

您可以使用JavaScript文件阅读器阅读图像，并使用画布对象进行显示。不确定浏览器兼容性，因为它需要一些html5的东西。 – Marius

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

添加一个div到HTML（DOM）：

<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>

注：这可能并不适用于旧的浏览器。

我希望它有帮助。

来源

2014-03-01 09:47:37

您试图将<img>标记的src属性设置为本地文件路径。但是，Web浏览器不会公开<input>标记的value属性中的本地文件URL（file://...）。浏览器实现可能会有所不同例如，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.") 
    } 
}

你需要一个相当现代的Web浏览器这个工作：

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

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

来源

2014-03-01 10:03:43

显示图像使用上传JS

回答

相关问题