原生js多图片上传并预览

悠悠 2022-01-31 13:39 507阅读 0赞

因为原生JS比较通用，不管你前端用的什么框架， 基本可以使用这套写法，也是参考网上的，自己写的不完善，基本提供一个思路，勿喷！！

html 代码，input标签里面一定要有multiple属性，这个是支持多选的：

<div style="padding: 20px">
                                <input onchange="SelectImg()" name="Img" type="file" id="FileImg" multiple="">
    
                            </div>
    
                            <fieldset style="width:auto;">
                                <legend>图片预览</legend>
                                <div style="position: relative;" id="ccc">
                                </div>
                            </fieldset>

js代码：

function SelectImg() {
                DuoImgsYulan(document.getElementById("FileImg").files, "ccc");
    
            }
    
    
            function ClearfirtsImg() {    //删除，多图片情况下，要在file数组里面选到你点击的那张图片的file再清空，我这里全部清空了
                var file = $("#FileImg")
                file.after(file.clone().val(""));
                file.remove();
                
            }
    
            function DuoImgsYulan (file, id) {
                for (var i = 0; i < 10; i++) {
                    if (!/image\/\w+/.test(file[i].type)) {
                        alert("请选择图片文件");
                        return false;
                    }
                    if (file[i].size > 2048 * 1024) {
                        alert("图片不能大于2MB");
                        continue;
                    }
                    var img;
                    console.log(document.getElementById("FileImg"));
                    console.log(file[i]);
                    console.log("file-size=" + file[i].size);
                    var reader = new FileReader();
                    reader.readAsDataURL(file[i]);//base64的格式
                    reader.onloadstart = function (e) {
                        console.log("开始读取....");
                    }
                    reader.onprogress = function (e) {
                        console.log("正在读取中....");
                    }
                    reader.onabort = function (e) {
                        console.log("中断读取....");
                    }
                    reader.onerror = function (e) {
                        console.log("读取异常....");
                    }
                    reader.onload = function () {
                        console.log("成功读取....");
                        var div = document.createElement("div"); //外层 div
                        div.setAttribute("style", "position:relative;width:inherit;height:inherit;float:left;z-index:2;width:150px;margin-left:8px;margin-right:8px;");
                        var del = document.createElement("div"); //删除按钮div
                        del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99; width: 30px; height:30px;border-radius:50%;")
                        var delicon = document.createElement("img");
                        delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png");
                        delicon.setAttribute("title", "删除");
                        delicon.setAttribute("style", "cursor:pointer;width: 30px; height:30px");
                        del.onclick = function () {
                            this.parentNode.parentNode.removeChild(this.parentElement);
                            ClearfirtsImg();
                        };
                      
                        del.appendChild(delicon);
                    div.appendChild(del);删除，真正删除需要把files里面的对应的那个元素清空，我这里就没做了。
                        var imgs = document.createElement("img"); //上传的图片
                        imgs.setAttribute("name", "loadimgs");
                        imgs.setAttribute("src", this.result);
                    
                        imgs.setAttribute("style", "cursor:pointer;width: 150px; height:150px");
                        if (document.getElementById(id).childNodes.length > 9) {
                            document.getElementById(id).removeChild(document.getElementById(id).firstChild);
                        }
                        div.appendChild(imgs)
                        document.getElementById(id).appendChild(div);
                    }
                   
                }
            }

表单提交的时候，记得form标签设置 enctype这个属性：    <form enctype="multipart/form-data"></form>

在控制端接收，Request域获取file的内容，.net mvc 控制器里面是这样获取，我个人是把图片存在文件系统，其他后端可参考

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z4eGFzaGVsbHk_size_16_color_FFFFFF_t_70][]

数据库photo字段存图片路径，多个图片路径用逗号分隔，前端回显图片的方法和上传的JS代码类似：

function ShowPhoto() {
                var imageUrl = '@ViewBag.imageUrl';//'@ViewBag.imageUrl'这个是.net mvc的写法，就是用逗号分隔的图片路径，对应数据库的photo字段
                var urlList = imageUrl.split(',');
    
                //获取当前网址，如： http://localhost:8083/myproj/view/my.jsp
                var curWwwPath=window.document.location.href;
    
                //获取主机地址之后的目录，如： myproj/view/my.jsp
    
                var pathName=window.document.location.pathname;
    
                var pos=curWwwPath.indexOf(pathName);
    
                //获取主机地址，如： http://localhost:8083
    
                var localhostPaht = curWwwPath.substring(0, pos);
                var id = "ccc";
                for (var i in urlList) {
                    var path = localhostPaht + "/" + urlList[i];
                   // alert(localhostPaht + "/" + urlList[i]);
                    var div = document.createElement("div"); //外层 div
                    div.setAttribute("style", "position:relative;width:inherit;height:inherit;float:left;z-index:2;width:150px;margin-left:8px;margin-right:8px;");
                    var del = document.createElement("div"); //删除按钮div
                    del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99; width: 30px; height:30px;border-radius:50%;")
                    var delicon = document.createElement("img");
                    delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png");
                    delicon.setAttribute("title", "删除");
                    delicon.setAttribute("style", "cursor:pointer;width: 30px; height:30px");
                    del.onclick = function () {
                        this.parentNode.parentNode.removeChild(this.parentElement);
                        ClearfirtsImg();
                    };
                    del.appendChild(delicon);
                    div.appendChild(del);删除，真正删除需要把files里面的对应的那个元素清空，我这里就没做了。
                    var imgs = document.createElement("img"); //上传的图片
                    imgs.setAttribute("name", "loadimgs");
                    imgs.setAttribute("src", path);
                 
                    imgs.setAttribute("style", "cursor:pointer;width: 150px; height:150px");
                    if (document.getElementById(id).childNodes.length > 9) {
                        document.getElementById(id).removeChild(document.getElementById(id).firstChild);
                    }
                    div.appendChild(imgs)
                    document.getElementById(id).appendChild(div);
    
                }
    
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z4eGFzaGVsbHk_size_16_color_FFFFFF_t_70]: /images/20220131/c8891fb930ba4243bcdec6f3cb466bfc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，507人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现上传图片事实预览

html部分 <img alt="" id="img" > <input type="file" onchange='PreviewImage(this

分手后的思念是犯贱/ 2022年07月12日 23:08/ 0 赞/ 395 阅读

相关 Angularjs 实现多图片上传预览

最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后

我会带着你远行/ 2022年06月08日 09:56/ 0 赞/ 352 阅读

相关 js上传图片预览

function imgFile(file){ file.change(function(){ var current_img=this.file

本是古典何须时尚/ 2022年05月22日 03:34/ 0 赞/ 474 阅读

相关 Java上传图片预览并通过JS压缩

1.前端上传图片JS压缩 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn

- 日理万妓/ 2022年05月17日 05:16/ 0 赞/ 296 阅读

相关 Angularjs 实现多图片上传预览

先看效果图 ![70][] 图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。我们先写一

水深无声/ 2022年05月15日 12:10/ 0 赞/ 360 阅读

相关 js 实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。 ![复制代码][copycode.gif] <!DOCTYPE html>

我不是女神ヾ/ 2022年05月06日 20:28/ 0 赞/ 441 阅读

相关原生js多图片上传并预览

因为原生JS比较通用，不管你前端用的什么框架，基本可以使用这套写法，也是参考网上的，自己写的不完善，基本提供一个思路，勿喷！！ html 代码，input标签里面一定要有m

悠悠/ 2022年01月31日 13:39/ 0 赞/ 508 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 785 阅读

相关多图片上传预览的实现

闲话日常：有时候在项目中，可能会用到图片上传的预览功能，而之前总是在网上找相关的插件进行实现，但是有的时候发现别人写好的插件，有时候会影响到自身布局的样式，偶尔还很难进

比眉伴天荒/ 2021年11月17日 06:06/ 0 赞/ 574 阅读

相关 JavaScript实现图片上传并预览并提交

学习一下思路，上传部分可以用vue对象方法和axios代替图片上传并预览 ![这里写图片描述][SouthEast] HTML <div clas

桃扇骨/ 2021年09月18日 02:06/ 0 赞/ 609 阅读