多图片上传、拖拽上传、拖动排序、图片预览效果
多图片上传、拖拽上传、拖动排序、图片预览效果
效果如下：
直接将如下代码复制到html文件中运行即可：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery多图片上传、拖拽上传、拖动排序、图片预览效果</title>
<!--放到项目中写法-->
<script src="./jquery.min.js"></script>
<script src="./Sortable.min.js"></script>
<!--测试写法-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Sortable/1.8.3/Sortable.js"></script>
<style>
.imageDiv {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px
}
.cover {
position: absolute;
z-index: 1;
top: 0px;
width: 160px;
height: 130px;
background-color: rgba(0,0,0,.3);
display: none;
cursor: pointer;
}
.cover .delbtn {
color: red;
padding: 1px 5px;
background-color: #faffbd;
border: 1px solid #faffbd;
border-radius: 3px;
}
.imageDiv:hover .cover {
display:block;
}
.addImages {
display:inline-block;
width:360px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px;
}
.text-detail {
margin-top:40px;
text-align:center;
}
.text-detail span {
font-size:40px;
}
.file {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
.sortable-ghost {
opacity: 0.4;
background-color: #F4E2C9;
}
.block__list li {
cursor: pointer;
}
</style>
</head>
<body>
<form method="post" action="" id="passForm" enctype="multipart/form-data" multipart="">
<div id="Pic_pass">
<!--多图片标题-->
<h1>多图片上传、拖拽上传、拖动排序、图片预览效果</h1>
<!--多图片上传提示信息-->
<div>
<span style="color: red">注意：上传的图片必须是以.png/.jpeg/.gif/.jpg为后缀且每张图片大小不能超过4M。上传后可以拖动图片进行排序。</span>
</div>
<!--图片上传按钮区域-->
<div class="addImages">
<input type="file" class="file" id="fileInput" multiple="" accept="image/png, image/jpeg, image/gif, image/jpg">
<div class="text-detail">
<span>+</span>
<p>点击“+”上传图片或拖拽到“+”上传图片</p>
</div>
</div>
<!--图片预览区域-->
<div id="foo"></div>
</div>
<div class="msg" style="display: none;"></div>
</form>
<script>
//图片上传预览功能
var userAgent = navigator.userAgent; //用于判断浏览器类型
$(".file").change(function() {
debugger
//获取选择图片的对象
var docObj = $(this)[0];
var foo = $("#foo");
//得到所有的图片文件
var fileList = docObj.files;
//添加时间戳
var dateTime = new Date().getTime();
//fileList.lastModified =dateTime;
//循环遍历
for (var i = 0; i < fileList.length; i++) {
//动态添加html元素
var picHtml = "<div class='imageDiv' > <img id='img_"+ dateTime + "_" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
console.log(picHtml);
//foo.prepend(picHtml);//prepend() - 在被选元素的开头插入内容
foo.append(picHtml);//append() - 在被选元素的结尾插入内容
//获取图片imgi的对象
var imgObjPreview = document.getElementById("img_"+ dateTime + "_" + fileList[i].name);
if (fileList && fileList[i]) {
//图片属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '160px';
imgObjPreview.style.height = '130px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
if (userAgent.indexOf('MSIE') == -1) {
//IE以外浏览器
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
console.log(imgObjPreview.src);
// var msgHtml = '<input type="file" id="fileInput" multiple/>';
} else {
//IE浏览器
if (docObj.value.indexOf(",") != -1) {
var srcArr = docObj.value.split(",");
imgObjPreview.src = srcArr[i];
} else {
imgObjPreview.src = docObj.value;
}
}
}
}
/*删除功能*/
$(".delbtn").click(function() {
var imageDiv = $(this);
imageDiv.parents(".imageDiv").remove();
});
});
//拖动排序
Sortable.create(document.getElementById('foo'), {
animation: 150, //动画参数
onAdd: function (evt) { //拖拽时候添加有新的节点的时候发生该事件
console.log('onAdd.foo:', [evt.item, evt.from]);
},
onUpdate: function (evt) { //拖拽更新节点位置发生该事件
console.log('onUpdate.foo:', [evt.item, evt.from]);
},
onRemove: function (evt) { //删除拖拽节点的时候促发该事件
console.log('onRemove.foo:', [evt.item, evt.from]);
},
onStart: function (evt) { //开始拖拽出发该函数
console.log('onStart.foo:', [evt.item, evt.from]);
},
onSort: function (evt) { //发生排序发生该事件
console.log('onSort.foo:', [evt.item, evt.from]);
},
onEnd: function (evt) { //拖拽完毕之后发生该事件
console.log('onEnd.foo:', [evt.item, evt.from]);
}
});
</script>
</body>
</html>
转载至：http://www.chuaisou.com/index.html#/app/itw?rt=1&pn=I1600235K8803588