已解決430363個問題，去搜搜看，總會有你想問的

javascript如何在上傳框中獲取本地文件的地址

首頁猿問 javascript如何在上傳框中...

javascript如何在上傳框中獲取本地文件的地址

JavaScript

慕少森 2019-03-16 14:15:10

是這樣的，我想做一個圖片上傳前的預覽功能，因此想讀出上傳框中本地文件的地址，然后把它設置為一個img標簽的src地址，這樣就可以展示出來。就像這樣<input type="file" id="file" name="img" /><script>$('#file').change(function () { $('<img src="' + $(this).val() + '" />').insertAfter(this);});</script>但是我發現這里用$(this).val()取出來地址完全不是真實地址啊，都是類似c://fakepath/...之類的假地址，我怎么來實現這個功能呢？

查看完整描述

2 回答

慕后森

TA貢獻1802條經驗獲得超5個贊

我能想到三條線索：

用HTML5的File API，Mozilla有個例子，雖然不是所有瀏覽器都支持,但我推薦這個方案，反正這些懶得去找一款好用的瀏覽器的人，也不會在乎你有沒有這個預覽功能。
可用性最廣泛的辦法是選擇了圖片后，就把圖片用個ajax請求上傳到服務器，生成縮略圖，取回來顯示，但如果你的圖片很大，那就沒轍了，這樣的接口也容易被人用來攻擊你的服務器。
再不然就是用flash了，如果用戶瀏覽器的安全選項允許，可以直接操作本地的圖片。

反對回復 2019-04-11

慕的地10843

TA貢獻1785條經驗獲得超8個贊

由于安全性的原因，從ie8以上的瀏覽器就封閉了這個接口，所以返回來的都是fakepath這樣的路徑，你如果想實現在線預覽的話，可以使用HTML5新增的File API來實現，具體的寫法你可以這樣

<!DOCTYPE html>

<html>

<head>

window.onload=function(){

var file=document.getElementById("file")

file.onchange=function(){

var img=document.createElement("img")

img.src=window.URL.createObjectURL(file.files[0])

img.onload=function(){

window.URL.revokeObjectURL(this.src)

}

document.body.appendChild(img)

}

</script>

</head>

<body>

</body>

</html>

反對回復 2019-04-11

2 回答
0 關注
2442 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

javascript如何在上傳框中獲取本地文件的地址

javascript如何在上傳框中獲取本地文件的地址

2 回答

添加回答