<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="index.css">
<body>
<div class="C_enclosure">
<!--<span>合同附件</span>-->
<div class="C_imgContent">
<div class="C_imgContentTop">
<img class="C_all"
src="./images/icon14.png">
<div class="C_text">已选择<span>1</span>项内容</div>
<div class="C_cancel">取消选中</div>
<img class="C_deleteIcon"
src="./images/icon11.png">
</div>
</div>
<div class="C_addImg">
<div class="C_inputClick"><img
src="./images/icon7.png"><span>添加照片</span>
</div>
<input style="display: none" class="chooseFile" type="file" multiple="multiple">
<div class="C_addImgLast">或将照片拖拽到这里</div>
</div>
</div>
<button type="button" id="submit" >提交</button>
<script src="jquery.min.js"></script>
<script src="qiniu.min.js"></script>
<script>
var root = "";//域名
var fileArr = [];//合同附件图片
var qiNiuKey = [];//七牛返回key
var _path = ".";
// 上传设置
var config = {
useCdnDomain: true,
region: null
};
//拖拽上传照片
var box = $(".C_imgContent")[0];
//点击添加图片btn
$(".C_inputClick").click(function () {
$(".chooseFile").click();
});
//点击添加图片图片
$(".C_imgContent").on("click", ".C_addImgUnit", function () {
$(".chooseFile").click();
});
$(".chooseFile").on("change", function () {
console.log($(this)[0].files);
fileUrl($(this)[0].files);
if ($(".C_imgUnit").length > 0) {
$(".C_addImg").css("display", "none");
} else {
$(".C_addImg").css("display", "block");
}
});
box.ondragover = function (e) {
e.preventDefault();
};
box.ondrop = function (e) {
e.preventDefault();
var f = e.dataTransfer.files;//获取到第一个上传的文件对象
fileUrl(f);
};
//鼠标移入合同附件的图片
$(".C_imgContent").on("mouseover", ".C_imgUnit", function () {
$(this).css("border", "2px solid #29AEEF");
$(this).find(".C_imgShadow").css("display", "block");
});
$(".C_imgContent").on("mouseout", ".C_imgUnit", function () {
if ($(this).find(".C_chooseDelete").attr("src") != _path + "/images/icon13.png") {//如果没有选择
$(this).find(".C_imgShadow").css("display", "none");
}
$(this).css("border", "2px solid #FFFFFF");
});
var choseImgArr = [];//选中图片的下标
//点击选择图片
$(".C_imgContent").on("click", ".C_chooseDelete", function () {
var index = $(".C_chooseDelete").index($(this));
if ($(this).attr("src") == _path + "/images/icon10.png") {//选择
$(this).attr("src", _path + "/images/icon13.png");
choseImgArr.push(index);
} else {//取消选择
$(this).attr("src", _path + "/images/icon10.png");
$(".C_all").attr("src", _path + "/images/icon14.png");
choseImgArr.remove(index);
}
console.log(choseImgArr);
isShow();
});
//全选
$(".C_all").on("click", function () {
choseImgArr = [];
$(this).attr("src", _path + "/images/icon13.png");
for (var i = 0; i < $(".C_imgUnit").length; i++) {
var ele = $(".C_imgUnit").eq(i);
ele.find(".C_imgShadow").css("display", "block");
ele.find(".C_chooseDelete").attr("src", _path + "/images/icon13.png");
choseImgArr.push(i);
}
});
//取消全选
$(".C_cancel").on("click", function () {
for (var i = 0; i < $(".C_imgUnit").length; i++) {
var ele = $(".C_imgUnit").eq(i);
ele.find(".C_imgShadow").css("display", "none");
ele.find(".C_chooseDelete").attr("src", _path + "/images/icon10.png");
}
choseImgArr = [];
$(".C_all").attr("src", _path + "/images/icon14.png");
isShow();
});
//单个删除
$(".C_imgContent").on("click", ".C_delete", function () {
var index = $(".C_delete").index($(this));
$(".C_imgUnit").eq(index).remove();
choseImgArr = [];
for (var i = 0; i < $(".C_imgUnit").length; i++) {
if ($(".C_chooseDelete").attr("src") == _path + "/images/icon13.png") {
choseImgArr.push(i);
}
}
fileArr.removeIndex(index - qiNiuKey.length);
qiNiuKey.removeIndex(index);
console.log(qiNiuKey);
isShow();
});
//多个删除
$(".C_deleteIcon").on("click", function () {
choseImgArr.sort(sortNumber);
console.log(choseImgArr);
for (var i = choseImgArr.length - 1; i > -1; i--) {
fileArr.removeIndex(choseImgArr[i] - qiNiuKey.length);
qiNiuKey.removeIndex(choseImgArr[i]);
console.log(qiNiuKey);
$(".C_imgUnit").eq(choseImgArr[i]).remove();
}
choseImgArr = [];
isShow();
});
//鼠标经过多选删除图标
$(".C_deleteIcon").on("mouseover", function () {
$(this).attr("src", _path + "/images/icon12.png");
});
$(".C_deleteIcon").on("mouseout", function () {
$(this).attr("src", _path + "/images/icon11.png");
});
/**
*
* @param f是files，该方法是把图片文件生成url
*/
function fileUrl(f) {
$(".C_addImgUnit").remove();
var urlArr = [];
for (var i = 0; i < f.length; i++) {
fileArr.push(f[i]);
try {
var reader = new FileReader();
reader.readAsDataURL(f[i]);//把上传的文件对象转换成url
reader.onerror = function (e) {
console.log(e);
};
reader.onload = function () {
// var Url=e.target.result;//上传文件的URL
var Url = this.result;//上传文件的URL
urlArr.push(Url);
if (urlArr.length == f.length) {
preview(urlArr);
console.log(fileArr)
}
};
} catch (e) {
console.log(e);
}
}
}
/**
* 预览图片
* @param urlArr 是url的数组，该方法是把图片添加在页面上
*/
function preview(urlArr) {
var html = "";
for (var i = 0; i < urlArr.length; i++) {
if (i == 0) {
html += '<div class="C_imgUnit">';
}
if (i < urlArr.length - 1) {
html += '<img class="C_img" src="' + urlArr[i] + '">' +
'<div class="C_imgShadow">' +
'<img class="C_chooseDelete" src="' + _path + '/images/icon10.png">' +
'<img class="C_delete" src="' + _path + '/images/icon15.png">' +
'</div>' +
'</div><div class="C_imgUnit">';
} else {
html += '<img class="C_img" src="' + urlArr[urlArr.length - 1] + '">' +
'<div class="C_imgShadow">' +
'<img class="C_chooseDelete" src="' + _path + '/images/icon10.png">' +
'<img class="C_delete" src="' + _path + '/images/icon15.png">' +
'</div>' +
'</div><div class="C_addImgUnit">' +
'<img src="' + _path + '/images/icon16.png">' +
'<div>';
拖拽选择图片，图片预览，前端上传图片到七牛
需积分: 10 137 浏览量
2018-07-30
13:03:01
上传
评论
收藏 73KB ZIP 举报
demo.zip （22个子文件） 
demo 
index.css 3KB images 
icon5.png 1KB icon15.png 1KB icon10.png 971B icon11.png 1KB icon1.png 1KB demo.png 7KB icon14.png 993B upload.png 4KB icon8.png 1KB icon2.png 1KB icon12.png 1KB icon13.png 1KB icon9.png 1KB icon3.png 1KB icon16.png 1KB icon7.png 1KB icon4.png 1KB icon6.png 1KB
index.html 11KB jquery.min.js 82KB qiniu.min.js 49KB资源评论
