是这样的,我想做一个图片上传前的预览功能,因此想读出上传框中本地文件的地址,然后把它设置为一个img
标签的src
地址,这样就可以展示出来。就像这样
<input type="file" id="file" name="img" /> <script> $('#file').change(function () { $('<img src="' + $(this).val() + '" />').insertAfter(this); }); </script>
但是我发现这里用$(this).val()
取出来地址完全不是真实地址啊,都是类似c://fakepath/...
之类的假地址,我怎么来实现这个功能呢?
我能想到三条线索:
- 用HTML5的File API,Mozilla有个例子,虽然不是所有浏览器都支持,但我推荐这个方案,反正这些懒得去找一款好用的浏览器的人,也不会在乎你有没有这个预览功能。
- 可用性最广泛的办法是选择了图片后,就把图片用个ajax请求上传到服务器,生成缩略图,取回来显示,但如果你的图片很大,那就没辙了,这样的接口也容易被人用来攻击你的服务器。
- 再不然就是用flash了,如果用户浏览器的安全选项允许,可以直接操作本地的图片。
由于安全性的原因,从ie8以上的浏览器就封闭了这个接口,所以返回来的都是fakepath这样的路径,你如果想实现在线预览的话,可以使用HTML5新增的File API来实现,具体的写法你可以这样
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
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>
<input type="file" id="file"/>
</body>
</html>