圖片上傳、拖拽排序
阿新 • • 發佈：2018-11-17
solid mat click log 插件 sync 引用 min fin
最近的項目中遇到這樣一個需求，要求在上傳圖片時可多圖片上傳，並且可以拖拽排序。前面多圖片上傳比較好實現，網上一大片的教程、插件可供學習使用，可又要求可以拖拽排序，我也沒找到現有的代碼，自己也就研究著嘗試實現了下，實現的結果還是比較好的。大家有需要的可以參考下。
廢話不多說，直接上代碼。
HTML代碼：
<div class="wrapConatiner"> <div class="btn_wrapper"> <!--不使用file的默認樣式,隱藏file選擇框,使用button的click事件觸發選擇文件--> <input type="file" name="files" id="files" multiple style="display: none;" data-name="files1"/> <button class="btn"></button> </div> <!-- 放置上傳後圖片的容器 --> <div class="img_wrapper"> <ul></ul> </div> </div>
CSS代碼：
.img_wrapper{ width: 100%; display: flex; flex-wrap: wrap; } .dragWrapper { position: relative; width: 100%; height: 208px; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } .dragWrapper img{ width: 248px; height: 208px; } .img_wrapper li{ float: left; overflow: hidden; border: 2px solid transparent; transition: border-color .2s ease-out; margin: 10px; height: 212px; width: 252px; cursor: pointer; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } .img_wrapper li:hover{ border: 2px solid #00b295; } .wrapConatiner{ min-height: 522px; border: 2px dashed #b8c4ce; padding: 15px; } .dragWrapper em{ color: #b8c4ce; display: block; width: 124px; background-color: #FFFFFF; border-bottom: 2px solid #00b295; text-align: center; cursor: pointer; height: 40px; line-height: 40px; background-color: #fff; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } .btn_wrapper .btn{ width: 120px; height: 36px; border-radius: 4px; cursor: pointer; border: 1px solid #98CEFA; background: url(../images/upload.png)no-repeat center center; margin-left: 13px; }
js代碼：
$(document).ready(function() { //選擇文件點擊事件 $(".btn").click(function(e){ e.preventDefault(); $("#files").trigger("click"); }); //保存文件數組 var imgFiles = []; //記錄當前文件數 var fileCount = 0; //文件變化事件 $("#files").change(function() { var files = $(this)[0].files; var imageType = /^image\//; var namePrefix = $(this).data("name"); for(var i = 0;i < files.length;i ++) { var file = files[i]; var fileType = file.type; if(!imageType.test(fileType)) { layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(‘請選擇圖片類型文件‘, {icon: 6}); }); return; } var fileName = file.name; //文件的唯一標識 fileCount++; var fileId = namePrefix + ‘_‘ + fileName + ‘_‘ + fileCount; //保存文件到數組 imgFiles.push({ id : fileId, file : file }); } //清空file框文件,可以連續選擇同一文件 $(this).val(‘‘); //刷新拖動排序 $(".wrapConatiner").sortable(‘refresh‘); if($(‘#lineId‘).val()==‘‘){ layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(‘請填寫基本信息！！！‘, {icon: 6}); }); }else{ if(imgFiles.length < 1) { layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(‘文件為空‘, {icon: 6}); }); return; } if(!uploadFinish) { //文件正在上傳 return; } uploadFinish = false; var formData = new FormData(); $.each(imgFiles, function(index, value) { var id = value.id; formData.append(id, value.file); }); $.ajax({ url: ‘‘, data: formData, type: ‘POST‘, cache: false, contentType: false, processData: false, beforeSend:function(){ layer.load(); }, success: function(data){ console.log(data); //清空文件數組 imgFiles = []; //清空預覽圖片 $(".img_wrapper ul").html(‘‘); var picData=data.data.dearGroup; var picObj=JSON.parse(picData); $.each(picObj,function(n,value){ $(‘.img_wrapper ul‘).append(‘<li id="‘+value.id+‘"><div class="dragWrapper">‘ + ‘<input type="hidden" value="‘+value.id+‘">‘+ ‘<img src="‘ + value.pictureOssUrl + ‘"/>‘ + ‘<em class="setCover" style="position: absolute;top: -40px;left: 0;">封面</em>‘ + ‘<em class="removeImg" style="position: absolute;top: -40px;left:124px;">刪除</em></div></li>‘) }) layer.closeAll(‘loading‘); layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(data.message, {icon: 6}); }); }, error: function(e) { layer.closeAll(‘loading‘); layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(e.message, {icon: 6}); }); }, complete: function() { //設置請求完成 uploadFinish = true; } }); } }); //圖片拖動排序 var arr = ‘‘; $(".wrapConatiner").sortable({ items:‘li‘, delay: 0, cursor: ‘removeImg‘, revert: true, cursor: "move", scroll:true, stop:function (event) { //記錄sort後的id順序數組 var arr = $(".wrapConatiner").sortable(‘toArray‘); var orderTag=arr.join(‘,‘); $.ajax({ type: "POST", url: "", data: {orderTag:orderTag}, dataType: "json", success: function(data){ console.log(data); } }); } }); var uploadFinish = true; /* 鼠標移入顯示隱藏 */ $(‘.wrapConatiner‘).on(‘mouseover‘,".img_wrapper li",function(e){ $(this).find(‘em‘).stop().animate({top:"0px"}); }); $(‘.wrapConatiner‘).on(‘mouseout‘,".img_wrapper li",function(e){ $(this).find(‘em‘).stop().animate({top:"-40px"}); }); }); $(function(){ /* 刪除回顯的圖片文件 */ $(‘.wrapConatiner‘).on(‘click‘,‘.removeImg‘,function(){var _this=$(this); $.ajax({ type:"POST", url:"", async:false, dataType:"json", data:{}, success:function(data){ _this.parent(‘.dragWrapper‘).remove(); layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(data.message, {icon: 6}); }); }, error:function(data){ layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(data.message, {icon: 6}); }); } }); }) /* 設為封面 */ $(‘.wrapConatiner‘).on(‘click‘,‘.setCover‘,function(){if(lineId != ‘‘ ){ $.ajax({type:"POST", url:"", async:false, dataType:"json", data:{}, success:function(data){ console.log(data); layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(data.message, {icon: 6}); }); }, error:function(data){ console.log(data); layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg(data.message, {icon: 6}); }); } }); }else{ layui.use(‘layer‘, function(){ var layer = layui.layer; layer.msg("參數錯誤", {icon: 5}); }); } }) })
效果圖：
鼠標移入會有簡單的動畫效果，顯示設為封面、刪除圖片兩個功能按鈕。
頁面的引用文件有jquery.ui、layui。
這裏用了jquery.ui的拖拽小部件，layui的彈出提示、加載動畫。
結束。供大家在圖片拖拽排序方面參考。
圖片上傳、拖拽排序