利用jQuery实现图片上传拖拽排序代码



11 42 15



特效描述:利用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

加群请备注:从官网了解到