原生js多图片上传并预览

因为原生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 控制器里面是这样获取，我个人是把图片存在文件系统，其他后端可参考

 

数据库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);

            }

        }