顯示圖像使用上傳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

回答

相關問題