文件上传显示缩略图

最新推荐文章于 2024-11-13 17:58:28 发布

原创最新推荐文章于 2024-11-13 17:58:28 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何正确处理文件上传并实现预览功能。通过使用API转换文件路径为可用URL，解决了input[type=file] value属性无法创建对象URL的问题。文章强调了使用files属性而非value的重要性。

文件上传之后是不能直接把文件的路径赋值给img的src的，需要用一个API进行转换，其方法如下:

 "createRelUrl": function (src) {
            if (window.URL) {
                return window.URL.createObjectURL(src);
            } else if (window.webkitURL) {
                return window.webkitURL.createObjectURL(src);
            } else {
                return "";
            }
        }

但是，由于在做的时候，没有仔细，用的是input[type=‘file’]的value属性，结果会爆出下面一个错:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

查了很多资料也没解决，后来发现，不要用value，而是用files，files是一个数组，如果是单文件，即是files[0],多文件就是files[i],至此问题完美解决。