前台页面FileReader多文件上传与回显

最新推荐文章于 2024-02-22 17:59:27 发布

qq_39529324

最新推荐文章于 2024-02-22 17:59:27 发布

阅读量1.6k

点赞数

文章标签： FileReader 多图片上传多图片回显

做项目时，要用到图片上传，可是框架内没有封装任何文件上传控件，只能用 input file ,可是却不能回显，只能去网上查找，结果都是一些jquery插件。插件都很大，而且样式都封装了，和项目框架不搭，就想知道js有没有可以直接会显得方法，结果还真找到了。仅仅一个HTML就可以支持图片上传回显，而且样式可以自己修改，只是比较简洁，不过够用了。

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件不上传预览</title>
</head>
<body>
<input id="load" type="file" onchange="upload(this.files)" multiple/>
<div id="huixian"></div>
<script type="text/javascript">
function getobj(obj) {
return document.getElementById(obj);
}
function upload(f){
var str = "";
for(var i=0;i<f.length;i++){
var reader = new FileReader();
reader.readAsDataURL(f[i]);
reader.onload = function(e){
str+='<img src="'+e.target.result+'"/>';
getobj("huixian").innerHTML = str;
}
}
}
</script>
</body>
</html>
<script type="text/javascript">


   function changeImg(){
       var oFReader = new FileReader();
            var file = document.getElementById('input').files[0];


            oFReader.readAsDataURL(file);
            oFReader.onloadend = function(oFRevent){
                var src = oFRevent.target.result;
                document.getElementById("uploadFile1").src=src
            }
            var oFReader = new FileReader();
            var file = document.getElementById('input').files[1];
            oFReader.readAsDataURL(file);
            oFReader.onloadend = function(oFRevent){
                var src = oFRevent.target.result;
                document.getElementById("uploadFile2").src=src
            }
            var oFReader = new FileReader();
            var file = document.getElementById('input').files[2];
            oFReader.readAsDataURL(file);
            oFReader.onloadend = function(oFRevent){
                var src = oFRevent.target.result;
                document.getElementById("uploadFile3").src=src
            }

   }
   </script>

qq_39529324

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前台页面FileReader多文件上传与回显

做项目时，要用到图片上传，可是框架内没有封装任何文件上传控件，只能用 input file ,可是却不能回显，只能去网上查找，结果都是一些jquery插件。插件都很大，而且样式都封装了，和项目框架不搭，就想知道js有没有可以直接会显得方法，结果还真找到了。仅仅一个HTML就可以支持图片上传回显，而且样式可以自己修改，只是比较简洁，不过够用了。[html] view plain copy &lt;!...
复制链接

扫一扫