html程式碼

                            <div class="main" id="sctp">
                                <div class="upload-content">
                                    <h3>上傳圖片</h3>
                                    <div class="content-img">
                                        <
 
ul class="content-img-list" id="img_wrap"></ul>
                                        <div class="file">
                                            <i class="gcl gcladd"></i>
                                            <input type="file" name="file" accept="image/*" id="upload"
 
 multiple="multiple" />
                                        </div>
                                    </div>
                                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                                        <
 
div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                        
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

js程式碼

　　　　　　var imgFile = []; //檔案流
　　　　　　var imgSrc = []; //圖片路徑

　　 //上傳圖片功能 $('#upload').on('change',function(e){ varfileList=this.files; varimgBox='.content-img-list'; for(vari=0;i<fileList.length;i++){ if(fileList[i].size>1024*1024*1024*1){//1M returnalert("上傳圖片不能超過1024MB"); }; if(fileList[i].type!='image/png'&&fileList[i].type!='image/jpeg'&&fileList[i].type!='image/gif'){ returnalert("圖片上傳格式不正確"); }


imgFile.push(fileList[i]);//檔案流
varimgSrcI=getObjectURL(fileList[i]); imgSrc.push(imgSrcI);//圖片路徑
} addNewContent(imgBox); this.value=null;//上傳相同圖片 }); //滑鼠經過顯示刪除按鈕 $('.content-img-list').on('mouseover','.content-img-list-item',function(){ $(this).children('div').removeClass('hide'); }); //滑鼠離開隱藏刪除按鈕 $('.content-img-list').on('mouseleave','.content-img-list-item',function(){ $(this).children('div').addClass('hide'); });

//單個圖片刪除 $(".content-img-list").on("click",'.content-img-list-itema.gcllajitong',function(){ varindex=$(this).parent().parent().parent().index(); imgSrc.splice(index,1); imgFile.splice(index,1); varboxId=".content-img-list"; addNewContent(boxId); });

//圖片展示 functionaddNewContent(obj){ $(obj).html(""); for(vara=0;a<imgSrc.length;a++){ varoldBox=$(obj).html(); $(obj).html(oldBox+'<liclass="content-img-list-item"><imgsrc="'+imgSrc[a]+'"alt="">'+ '<divclass="hide"><aindex="'+a+'"class="delete-btn"><iclass="gclgcllajitong"></i></a>'); } } //建立可存取到file的url functiongetObjectURL(file){ varurl=null; if(window.createObjectURL!=undefined){//basic url=window.createObjectURL(file); }elseif(window.URL!=undefined){//mozilla(firefox) url=window.URL.createObjectURL(file); }elseif(window.webkitURL!=undefined){//webkitorchrome url=window.webkitURL.createObjectURL(file); } returnurl; }