利用jQuery實現圖片上傳拖拽排序代碼



17 64 22



特效描述:利用jQuery實現 圖片上傳 拖拽排序 代碼,利用jQuery實現圖片上傳拖拽排序代碼

代碼結構

1. 引入CSS

<link href="layui/css/layui.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="node_modules/sortablejs/Sortable.min.js"></script>

3. HTML代碼

<div class="container" id="app">
<div class="row">
	<div class="col-md-12">
		<form class="" action="upload.php" method="POST">
			<div class="card">
				<div class="card-body">
					<table class="table">
						<thead>
						<tr>
							<th width="30%">名稱</th>
							<th width="50%">圖片</th>
							<th width="20%">操作</th>
						</tr>
						</thead>
						<tbody id="tbody-items">
						<tr v-for="(v,i) in items" class="tr-item">
							<td>
								<div class="input-group">
									<input type="text" class="form-control" name="name" v-model="v.name">
								</div>
							</td>
							<td>
								<div class="row">
									<div class="col-sm-10">
										<div class="input-group" style="position: relative;">
											<input type="text" class="form-control" name="pic" v-model="v.pic"
												   readonly>
											<img src="images/delete.png" height="20"
												 style="position: absolute;cursor: pointer;top:-10px;right:38px;z-index:999;"
												 @click="delImg(i)">
											<div class="input-group-append">
												<div class="upload-btn">
													<input class="upload-img" type="file" name="file"
														   @change="upload($event, i)">
												</div>
											</div>
										</div>
									</div>
									<div class="col-sm-2 p-0">
										<button type="button" class="btn btn-primary p-0 m-0">
											<img class="preview-img" :id="'preview-img-' + (i + 1)"
												 src="images/preview.png" height="36" :layer-src="v.pic"
												 @click="previewImg(i)" title="點擊預覽">
										</button>
									</div>
								</div>
							</td>
							<td>
								<div class="input-group">
									<button type="button" class="btn btn-secondary p-0 m-0 move-action mr-2"
											style="cursor: move;">
										<img src="images/move.png" height="36">
									</button>
									<button type="button" class="btn btn-danger" @click="del(i)">刪除</button>
								</div>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
				<div class="ml-3 mb-3">
					<button type="button" class="btn btn-primary" @click="add();">添加一項</button>
				</div>
				<!--
				<textarea name="data" class="form-control" rows="8">{{items}}</textarea>
				-->
			</div>
		</form>
	</div>
</div>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		items: [],
	},
	updated() {
		var _this = this;
		var $tbody = _this.$el.querySelector('#tbody-items');
		new Sortable($tbody, {
			handle: '#tbody-items .move-action',
			onUpdate: function (event) {
				//修改items數據順序
				var newIndex = event.newIndex,
					oldIndex = event.oldIndex,
					$tr = $tbody.children[newIndex],
					$oldTr = $tbody.children[oldIndex];
				// 先刪除移動的節點
				$tbody.removeChild($tr);
				// 再插入移動的節點到原有節點,還原了移動的操作
				if (newIndex > oldIndex) {
					$tbody.insertBefore($tr, $oldTr)
				} else {
					$tbody.insertBefore($tr, $oldTr.nextSibling)
				}
				// 更新items數組
				var item = _this.items.splice(oldIndex, 1);
				_this.items.splice(newIndex, 0, item[0]);
			},
			animation: 150,
		})
	},
	mounted() {
	},
	methods: {
		add() {
			this.items.push({
				name: '',
				pic: '',
			});
		},
		del(pos) {
			this.items.splice(pos, 1);
		},
		upload(event, pos) {
			let _this = this;
			let file = event.target.files[0];
			let fileSize = file.size;
			let fileName = file.name;
			let fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
			try {
				this.checkExt(fileExt);//檢測文件后綴
				this.checkSize(fileSize);//檢測文件大小
				let param = new FormData();
				param.append("file", file);
				let config = {
					headers: {"Content-Type": "multipart/form-data"}
				};
				axios.post('upload.php', param, config).then(function (res) {
					if (res.data.code == 1) {
						_this.items[pos].pic = res.data.file_url;
						// $('#preview-img-' + (parseInt(pos) + 1)).attr('layer-src', res.data.file_url);
					} else {
						layer.msg(res.data.msg);
					}
				}).catch(function (err) {
					console.log(err);
				});
			} catch (err) {
				layer.msg(err);
			}
		},
		delImg(pos) {
			this.items[pos].pic = '';
		},
		checkExt(ext) {
			//上傳圖片格式
			if (!['jpg', 'png', 'jpeg', 'gif', 'bmp'].includes(ext)) {
				throw '上傳圖片格式不正確';
			}
		},
		checkSize(size) {
			//限制2M
			if (size > 2000 * 1024) {
				throw '上傳圖片大小不能超過2M';
			}
		},
		previewImg(pos) {
			let img = $('#preview-img-' + (parseInt(pos) + 1)).attr('layer-src');
			if (!img) {
				layer.msg('沒有可以預覽的圖片');
				return false;
			}
			layer.photos({
				photos: {
					"title": "", //相冊標題
					"id": 'image_preview', //相冊id
					"start": 0, //初始顯示的圖片序號,默認0
					"data": [   //相冊包含的圖片,數組格式
						{
							"alt": "",
							"pid": 666, //圖片id
							"src": img, //原圖地址
							"thumb": img //縮略圖地址
						}
					]
				}, //格式見API文檔手冊頁
				anim: 5, //0-6的選擇,指定彈出圖片動畫類型,默認隨機
				shadeClose: true,
				// skin: 'layui-layer-nobg',
				shade: [0.5, '#000000'],
				shadeClose: true,
			});
		}
	}
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 頭像上傳 圖片上傳 拖動排序 拖拽排序 添加刪除
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 河南快三专家推荐预测号 gpk钱龙捕鱼挂 百赢棋牌游戏官网 开婚纱店能赚钱吗 神龙娱乐平台 快乐10分官方网站 网页街机捕鱼游戏 河北时时彩11选五开奖结果查询 新时时彩 村长有多赚钱 福建11选5技巧 北京麻将有没有作弊器有 龙之谷赚钱最快 达达赚钱钱跑腿 中国体育彩票 大乐透胆拖投注金额计算器