猿问

为什么这里用$(this).val()取出来地址完全不是真实地址？

是这样的，我想做一个图片上传前的预览功能，因此想读出上传框中本地文件的地址，然后把它设置为一个img标签的src地址，这样就可以展示出来。就像这样

<input type="file" id="file" name="img" /><script>$('#file').change(function () {
    $('<img src="' + $(this).val() + '" />').insertAfter(this);
});</script>

但是我发现这里用$(this).val()取出来地址完全不是真实地址啊，都是类似c://fakepath/...之类的假地址，我怎么来实现这个功能呢？


MM们
浏览 99回答 2
2回答

沧海一幻觉

我能想到三条线索：用HTML5的File API，Mozilla有个例子，虽然不是所有浏览器都支持,但我推荐这个方案，反正这些懒得去找一款好用的浏览器的人，也不会在乎你有没有这个预览功能。可用性最广泛的办法是选择了图片后，就把图片用个ajax请求上传到服务器，生成缩略图，取回来显示，但如果你的图片很大，那就没辙了，这样的接口也容易被人用来攻击你的服务器。再不然就是用flash了，如果用户浏览器的安全选项允许，可以直接操作本地的图片。
0

DIEA

由于安全性的原因，从ie8以上的浏览器就封闭了这个接口，所以返回来的都是fakepath这样的路径，你如果想实现在线预览的话，可以使用HTML5新增的File API来实现，具体的写法你可以这样<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title></title>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; window.onload=function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var file=document.getElementById("file")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; file.onchange=function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var img=document.createElement("img")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.src=window.URL.createObjectURL(file.files[0])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onload=function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.URL.revokeObjectURL(this.src)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(img)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script></head><body><input type="file" id="file"/></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答