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>

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: