input标签获取图片并展示

之前写过从后台获取项目外的图片并在前端展示时使用的方法是

Base64Encoder.encode(byte[] buffer);

但是今天遇到一个问题：

但点击input标签选择文件时，得到路径值却是这样C:\fakepath\test.jpg,中间的路径被fakepath代替，分析如下：

原因：

由于浏览器的安全机制，当我们获取input file的路径时被fakepath代替，隐藏了真实物理路径。当然，调整浏览器的浏览器安全设置可以解决这个问题，如：1.设置IE：工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即可但是这种解决办法显然不是我们想要的，不可能让每个用于都去设置浏览器安全选项。

解决方法：

直接上代码

<script type="text/javascript">
    var file=$("#file");
    file.change(function () {
        $("#image").attr("src",getObjectURL(file[0].files[0]));
    });
    function getObjectURL(file) {
        var url = null;
       /* window.URL = window.URL || window.webkitURL;*/

        if (window.createObjcectURL != undefined) {
            url = window.createOjcectURL(file);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

file对象是一个input

返回的url是这样的 blob:http%3A//localhost%3A8083/2ff77702-8153-4174-a354-05a92c2c0534

把这个二进制对象赋值给img标签的src属性就可以显示了

知识获取：

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL，这个URL的生命仅存在于它被创建的这个文档里，新的对象URL指向执行的File对象或Blob对象。

语法：objcetURL = window.URL.createObjectURL(file || blob);

参数：File对象和Blob对象；File对象就是一个文件，比如我用file type="file"标签来上传文件，那么里面的每个文件都是一个file对象。Blob对象就是二进制数据，比如在XMLHttpRequest里，如果指定requestType为blob，那么得到的返回值也是一个blob对象。

每次调用createObjectURL的时候，一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.，如果你不再需要这个对象，要释放它，需要使用URL.revokeObjectURL()方法.。当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它的时候,就应该释放它。

input标签获取图片并展示

猜你喜欢