jq 上传多张图片

https://www.jb51.net/article/140227.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

</head>
<style>
@charset "UTF-8";
html {
  font-family: "Microsoft YaHei",'微软雅黑 Light',Arial,Helvetica,sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hgroup, menu, nav, section, summary, time, mark {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  line-height: 1.5;
  font-size: 12px;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  background-color: transparent;
  -webkit-touch-callout: none;
}

img {
  border: 0;
  -webkit-touch-callout: none;
  vertical-align: top;
}

button, input, optgroup, select, textarea {
  margin: 0;
  padding: 0;
  line-height: normal;
  font: inherit;
  color: inherit;
  outline: none;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
  padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

.brand_detail_edit {
  background: #f5f5f5;
  padding: 0 0 40px;
  font-family: MicrosoftYaHei;
}

.brand_detail_edit .newslist_pos {
  background: none;
  position: relative;
  width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  color: #5c5c5c;
  line-height: 20px;
  padding: 30px 0;
}

.brand_detail_edit .newslist_pos a {
  font-size: 14px;
  color: #5c5c5c;
}

.brand_detail_edit .newslist_pos a:hover {
  color: #f44444;
}

.brand_detail_edit .newslist_pos .btn {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 0;
  width: 94px;
  height: 32px;
  background-color: #f44444;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 32px;
}

.brand_detail_edit .newslist_pos .btn:hover {
  background-color: #e63131;
  color: #fff;
}

.brand_detail_edit .content {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 63px 47px 77px 30px;
}

.brand_detail_edit .content:after {
  content: "";
  clear: both;
  height: 0;
  line-height: 0;
  display: block;
}

.brand_detail_edit .content li {
  width: 100%;
  margin-bottom: 50px;
}

.brand_detail_edit .content li:after {
  content: "";
  clear: both;
  height: 0;
  line-height: 0;
  display: block;
}

.brand_detail_edit .content li span {
  width: 100px;
  font-size: 14px;
  color: #666666;
  float: left;
  line-height: 32px;
}

.brand_detail_edit .content li input {
  float: left;
  border: 1px solid #CCCCCC;
  border-radius: 2px;
  width: 129px;
  height: 32px;
  line-height: 32px;
  padding-left: 18px;
  font-size: 14px;
  color: #181818;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.brand_detail_edit .content li .price {
  font-size: 14px;
  color: #F44444;
  padding-left: 14px;
}

.brand_detail_edit .content li textarea {
  width: 500px;
  height: 170px;
  border: 1px solid #CCCCCC;
  border-radius: 2px;
  line-height: 24px;
  padding: 10px 20px;
  font-size: 14px;
  color: #181818;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.brand_detail_edit .content .file_item .inputfile {
  width: 198px;
  cursor: pointer;
  float: left;
  height: 144px;
  border: 1px dashed #979797;
  background: url(../../img/refister13.png) no-repeat;
  background-position: center 35px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #6485CA;
  position: relative;
  padding: 70px 15px 0;
  font-size: 12px;
  color: #CCCCCC;
  overflow: hidden;
}

.brand_detail_edit .content .file_item .inputfile.avtive {
  color: #fff;
  background: #fff;
}

.brand_detail_edit .content .file_item .inputfile.avtive:hover:after {
  display: block;
}

.brand_detail_edit .content .file_item .inputfile input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
}

.brand_detail_edit .content .file_item .inputfile .img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 4;
  padding: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.brand_detail_edit .content .file_item .inputfile .img img {
  max-height: 100%;
}

.brand_detail_edit .content .file_item .inputfile:after {
  display: none;
  content: "重新上传图片";
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6) url(../../img/refister14.png) no-repeat;
  background-position: center 30px;
  line-height: 126px;
  text-align: center;
}

.brand_detail_edit .content .file_item_register .inputfile {
  padding-top: 60px;
}

.brand_detail_edit .content .brand_img .file_item {
  padding: 0 10px 0 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.brand_detail_edit .content .brand_img .inputfile {
  margin-right: 30px;
}

.brand_detail_edit .content .brand_img .pic_list {
  float: left;
}

.brand_detail_edit .content .brand_img .pic {
  height: 144px;
  width: 198px;
  border: 1px solid;
  float: left;
  margin-right: 15px;
  margin-bottom: 50px;
  position: relative;
}

.brand_detail_edit .content .brand_img .pic img {
  width: 100%;
  height: 100%;
}

.brand_detail_edit .content .brand_img .pic_delete {
  width: 18px;
  height: 18px;
  cursor: pointer;
  background: url(../../img/brandManage09.png) no-repeat;
  position: absolute;
  top: -10px;
  z-index: 88;
  right: 0;
}

.brand_detail_edit .content .brand_img .inputfile:nth-child(7) {
  margin-left: 100px;
  margin-bottom: 0;
}

.brand_detail_edit .content .pic:nth-of-type(6) {
  margin-left: 100px;
  margin-bottom: 0;
}

.brand_detail_edit .content .btn {
  background: #F44444;
  border-radius: 2px;
  margin: auto;
  font-size: 14px;
  color: #fff;
  text-align: center;
  width: 148px;
  height: 38px;
  line-height: 38px;
  border: none;
  display: block;
  margin-left: 100px;
}

.brand_detail_edit .content .cancel {
  border: 1px solid #F44444;
  color: #F44444;
  background: #fff;
  margin-left: 30px;
}
/*# sourceMappingURL=brandManageDetail.css.map */
</style>
<body>
        <div class="brand_detail_edit">
                <div class="newslist_pos">
                    当前位置:
                    <a href="">首页</a> &gt;
                    <a href="">商标监控</a> &gt;
                    <a href="">添加监控项目</a> 
                </div>
                    <ul class="content">
                        <li>
                            <span>商标价格 :</span>
                            <input type="text" placeholder="请输入商标价格">
                            <span class="price">元</span>
                        </li>
                        <li>
                            <span>品牌寓意 :</span>
                            <textarea maxlength="200" placeholder="输入商标品牌故事，字数限制200字"></textarea>
                        </li>
                        <li class="file_item">
                            <span>品牌logo :</span>
                            <div class="inputfile">
                                尺寸750*560px，大小100k
                                以内，可获得最佳的展示效果。
                                <input type="file" onchange="selectImage(this)">
                                <div class="img"><img src="" alt=""></div>
                            </div>
                        </li>
                        <ul class="brand_img">
                            <li class="file_item" >
                                <span>品牌图片 :</span>
                                <div class="inputfile uploadImgBtn" id="inputBefore">
                                    单张图片尺寸750*560px，大
                                    小100k以内，最多可上传9张图
                                    片。
                                    <input type="file" multiple id="file">
                                </div>
                            </li>
                        </ul>
                        <li class="file_item file_item_register">
                            <span>商标注册证 :</span>
                            <div class="inputfile">
                                将商标注册证拍照上传，尺寸
                                842*595px,大小100k以内。
                                商标注册证仅自己可见，不会
                                对外进行展示。
                                <input type="file" onchange="selectImage(this)">
                                <div class="img"><img src="" alt=""></div>
                            </div>
                        </li>
                        <li>
                            <span class="btn">保存</span>
                            <span class="btn cancel">取消</span>
                        </li>
                    </ul>
            </div>
            <script>
                function selectImage(file) {
    var image = '';
    if (!file.files || !file.files[0]) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        file.nextSibling.nextSibling.children[0].src = evt.target.result;
        file.parentNode.className += ' avtive';
        image = evt.target.result;
    }
    reader.readAsDataURL(file.files[0]);
}
$(function(){
    var fileArray = []
    $('.uploadImgBtn').click(function(){
        var inputBefore = document.getElementById('inputBefore');
         var $input = $("#file");
        var isUpload = false;
        $input.on('change',function(){
            var files = this.files;
            var length = files.length;
            var pic = document.getElementsByClassName('pic');
            var picLength =pic.length
            if(picLength+length > 9){
                alert("最多只能上传9张图片")
                return 
            }
            for(var i = 0 ; i<files.length;i++){
                fileArray.push(files[i])
            }
            $('.pic').remove()
　　　　　　　　//因为图片大小不一样，图片加载 所以每次情况掉，对所有数据进行遍历，为了 绑定上正确的id
            $.each(fileArray,function(key,value){
                //每次都只会遍历一个图片数据
                var div = document.createElement("div"),
                img = document.createElement("img");
                var spans = document.createElement("span");
                div.className = "pic";
                spans.className = "pic_delete"
                var fr = new FileReader();
                fr.onload = function(){
                  img.src=this.result;
                  spans.setAttribute("imgId",key);
                  div.appendChild(img);
                  div.appendChild(spans);
                  inputBefore.before(div);
                }
                fr.readAsDataURL(value);
              })
              console.log(1111);
        })
        $input.removeAttr("id");
        // // // 我们做个标记，再class中再添加一个类名就叫uploadImg
        var newInput = '<input class="uploadImg" type="file" multiple id="file">';
        $(this).append($(newInput));

    })
    $('.btn').click(function(){
        var file = $('.file').files;
        console.log(fileArray)
    })
})


            </script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/MR-cui/p/10728050.html