图片上传并预览
前言由于在项目中遇到一个上传图片的地方,一直在用公司框架,自己想了一下应该动手自己写一个完整的上传加深下印象,以下实现了全动态添加、删除、保存和预览。添加:动态添加上传图片的容器。删除:实现删除当前图片。预览:包含了反转、上一张、下一张、放大、缩小、还原和拖动换位置。保存:实时监听是否上传完整。废话不多说了,上代码。一、完成一个上传的整体思路。首先你要知道你要用到什么东西?需要如何去做。第一步:需
前言
由于之前都没有详细写过上传,现在写一个完整的记录一下加深下印象,以下实现了全动态添加、删除、保存和预览。
添加:动态添加上传图片的容器。
删除:实现删除当前图片。
预览:包含了反转、上一张、下一张、放大、缩小、还原和拖动换位置。
保存:实时监听是否上传完整。
废话不多说了,上代码。
一、完成一个上传的整体思路。
首先你要知道你要用到什么东西?需要如何去做。
第一步:需要实现上传的标签,<input type="file" /> 。用该元素可以实现上传图片的功能,由于我当时想的写的好看一些,使用label关联了一下input。之后代码会有展示。
第二步:实现新增操作,这里需要在外边给个大容器,然后动态加载每一块的图片区域,我这里是一个div是一个块。
第三步:实现删除操作,在执行删除操作时首先要获取到你点击的下标,根据下标去进行处理图片块的移出。
第四步:实现保存操作,点击保存时,你首先的获取到所有的图片块,进行遍历判断是否有的没选择图片,如果有没选择的,提醒选中图片,并且禁止往下继续执行。
第五步:实现预览操作,预览的话我为了好看是给新增了一个单独的预览块,其中包括了反转、上一张、下一张、放大、缩小、还原和拖动改变位置。
二、使用步骤
1.引入
<script src="../js/jquery-3.1.1.min.js"></script>
2.结构层
<h3>图片展示区域可进行拖动改变位置</h3>
<!-- 上传图片展示区域 -->
<div class="container" id="draggable">
</div>
<button class="xz" onclick="clickTj()">添加</button>
<button class="bc" onclick="preservation()">保存</button>
<!-- 预览图片区域 -->
<div class="previewZzc"></div>
<div id="preview" class="previewCont">
</div>
3.表示层
加号的图片需要自己去找
.container {
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
overflow: auto;
}
.containerTow {
width: 200px;
height: 200px;
border: 1px solid #ddd;
border-radius: 3px;
margin: 20px 10px;
position: relative;
}
.btn {
width: 100%;
position: absolute;
top: 205px;
left: 0;
display: flex;
justify-content: space-around;
}
.labelFile {
display: block;
width: 198px;
height: 150px;
background: url(../img/jia.png);
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -99px;
}
/* 预览区域 */
.previewZzc{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 10;
display: none;
/*IE高度*/
filter: alpha(opacity=50);
}
.previewCont{
width: 700px;
height: 325px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -350px;
z-index: 100;
background: #fff;
border-radius: 3px;
display: none;
}
/* 头部功能 */
.previewContent{
height: 35px;
line-height: 35px;
display: flex;
justify-content: center;
}
.previewHead{
display: flex;
justify-content: space-around;
width: 80%;
height: 30px;
margin-top: 5px;
}
/* 图片预览区域 */
.previewBody{
width: 400px;
height: 265px;
border: 1px solid;
position: absolute;
top: 50%;
left: 50%;
margin-top: -116.5px;
margin-left: -200px;
border: 1px solid #ddd;
overflow: hidden;
display: flex;
}
.previewBody img{
width: 400px;
height: 265px;
}
4.行为层(由于里面包含预览,东西太多,我就偷懒发到一起了,就不分开发了,里面有注释)
let _transform = 0;//反转的角度
let _transformList = new Object();//反转、放大缩小
let _enlargeTransform = 1;//放大、缩小
// 添加部分
function clickTj() {
let _file = "";
_file += '<div class="containerTow" draggable="true">';
_file += '<div>';
_file += '<input style="display:none;" class="filepath" onchange="changePic(this)" accept="image/jpeg,image/jpg,image/png,image/svg" type="file">';
_file += '<label for="" class="labelFile"></label>';
_file += '<img src="" width="200" height="200">';
_file += '</div>';
_file += '<div class="btn">';
_file += '<button onclick="imgPreview(this)">预览</button><button onclick="contentDelete(this)">删除</button>';
_file += '</div>';
_file += '</div>';
$(".container").append(_file);
let _jiaId = $(".containerTow img");
let _inputId = $(".containerTow input");
// 图片
for (let i = 0, len = _jiaId.length; i < len; i++) {
_jiaId[i].id = "id" + i;
_jiaId[i].setAttribute("data_num",i+1);
}
// input + label
let _newId = 0;
let _newFor = 0;
$(".containerTow input").each(function () {
_newId = ++_newId;
_newFor = ++_newFor;
$(this).attr("id", "file" + _newId);
$(this).next("label").attr("for", "file" + _newFor);
})
let newDraggable = false;
$(".containerTow").mousedown(function(){
newDraggable = true;
if(newDraggable){
divDraggable();
}
})
$(".containerTow").mouseup(function(){
newDraggable = false;
})
}
// 上传部分
function changePic(obj) {
// console.log(obj.files[0]);//这里可以获取上传文件的name
let $_thisId = $(obj);//当前ID
let _imgId = $(obj).nextAll("img").attr("id");
let _thisImg = $(obj).nextAll("img");
var newsrc = getObjectURL(obj.files[0]);
document.getElementById(_imgId).src = newsrc;
imgSrc(_thisImg);
}
//建立一個可存取到该file的url
function getObjectURL(file) {
var url = null;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
// 做一个小的图片判断,如果上传图片了,将十字去掉
function imgSrc(objId) {
let _imgSrc = $(objId).attr("src");
if(_imgSrc){
$(objId).prev().remove();
}
}
// 删除
function contentDelete(objThis){
let _this = $(objThis);
let _removeDiv = _this.parent().parent().remove();
}
// 预览
function imgPreview(objThis,objId,objTransform){
// 放大初始化
if(_enlargeTransform >= 4){
_enlargeTransform = 4;
}
// 缩小初始化
if(_enlargeTransform <= 0.1){
_enlargeTransform = 0.1;
}
$(".previewZzc").css("display","block");
$(".previewCont").css("display","block");
let _this = $(objThis);
let _imgSrc = "";//图片路径
let _newTopImg = "";//控制上下张数
if(objId == undefined){
_imgSrc = $(objThis).parent().prev().find("img").attr("src");
_newTopImg = $(objThis).parent().prev().find("img").attr("id");
}else if(objId != undefined){
_imgSrc = $(objId).parent().find("img").attr("src");
_newTopImg = $(objId).parent().find("img").attr("id");
}
if(objTransform != undefined){
_imgSrc = objTransform.src;
_newTopImg = objTransform.id;
}
let _content = "";//预览容器
_content += '<div class="previewContent">';
_content += '<div class="previewHead">';
_content += '<input type="button" value="上一张" onclick="imgTop('+ _newTopImg +')" />';
_content += '<input type="button" value="反转" onclick="imgReversal('+ _transform +')" />';
_content += '<input type="button" value="放大" onclick="imgEnlarge('+_enlargeTransform+','+0+')"/>';
// _content += '<input type="button" value="放大" onclick="imgEnlarge('+_enlargeWidth+','+_enlargeHeight+','+0+')"/>';
_content += '<input type="button" value="缩小" onclick="imgEnlarge('+_enlargeTransform+','+1+')" />';
// _content += '<input type="button" value="缩小" onclick="imgEnlarge('+_enlargeWidth+','+_enlargeHeight+','+1+')" />';
_content += '<input type="button" value="还原" onclick="imgReduction()" />';
_content += '<input type="button" value="下一张" onclick="imgBottom('+ _newTopImg +')" />';
_content += '<input type="button" value="关闭" onclick="imgNone()" />';
_content += '</div>';
_content += '</div>';
_content += '<div class="previewBody">';
_content += '<div class="img">';
_content += '<img src="'+_imgSrc+'" alt="'+_newTopImg+'" id="'+_newTopImg+'">';
_content += '</div>';
_content += '</div>';
$("#preview").html(_content);
// 鼠标滚轮
img(_enlargeTransform);
// 反转限制
if(_transform != 0){
$(".previewBody .img").css("transform","rotate("+_transform+"deg)");//反转
}
// 放大缩小限制
if(_enlargeTransform > 1){
$(".previewBody img").css({"transform":"scale("+_enlargeTransform+")","margin":"auto"});
}
if(_enlargeTransform <= 1){
$(".previewBody img").css({"transform":"scale("+_enlargeTransform+")","margin":"auto"});
}
}
// 关闭
function imgNone(){
$(".previewZzc").css("display","none");
$(".previewCont").css("display","none");
// 清空鼠标滚轮事件
// IE和谷歌
document.onmousewheel = function () {}
// 火狐
document.addEventListener('DOMMouseScroll', (e) => {});
}
//下一张
function imgBottom(_this){
let _imgLen = $(".containerTow img").length;
let _thisId = $(_this).parent().parent();
let _next = _thisId.next("div [class=containerTow]");
let _class = {
transform:"scale("+ 1 +")"
}
$(".previewBody img").css(_class);//放大
_enlargeTransform = 1;
if(_imgLen <= 1){
alert("无下张图片!");
return;
}else{
if(_next.length != 0){
// 替换内容区图片
let _nextSrc = _next.find("img").attr("src");
$(".previewBody").find("img").attr("src",_nextSrc);
// 获取当前内容区图片父下是否有下级数据
let _thisNextId = _next.find("img");
imgPreview("",_thisNextId);
}else{
alert("这是最后一张了!");
}
}
}
// 上一张
function imgTop(objThis){
let _imgLen = $(".containerTow img").length;
let _thisId = $(objThis).parent().parent();
let _next = _thisId.prev("div [class=containerTow]");
let _class = {
transform:"scale("+ 1 +")"
}
$(".previewBody img").css(_class);//放大
_enlargeTransform = 1;
if(_imgLen <= 1){
alert("无上张图片!");
return;
}else{
if(_next.length != 0){
// 替换内容区图片
let _nextSrc = _next.find("img").attr("src");
$(".previewBody").find("img").attr("src",_nextSrc);
// 获取当前内容区图片父下是否有下级数据
let _thisNextId = _next.find("img");
imgPreview("",_thisNextId);
}else{
alert("这是第一张了!");
}
}
}
// 反转
function imgReversal(objNumber){
let _class = {
transform:"rotate("+objNumber+"deg)"
}
$(".previewBody img").css("transform","rotate("+objNumber+"deg)");//反转
let _transformSrc = $(".previewBody img").attr("src");//图片路径
let _transformId = $(".previewBody img").attr("id");//图片Id
_transformList = {
"src":_transformSrc,
"id":_transformId
}
_transform = objNumber + 90;
if(_transform == 360){
_transform = 0;
}
imgPreview("",undefined,_transformList);
}
// 放大
function imgEnlarge(objTransform,objState){
let _transformSrc = $(".previewBody img").attr("src");//图片路径
let _transformId = $(".previewBody img").attr("id");//图片Id
_transformList = {
"src":_transformSrc,
"id":_transformId
}
let _class = "";
if(objState == "0"){//放大
_class = {
transform:"scale("+objTransform + 0.1 +")"
}
$(".previewBody img").css(_class);//放大
_enlargeTransform = objTransform + 0.1;
}else{// 缩小
_class = {
transform:"scale("+objTransform - 0.1 +")"
}
$(".previewBody img").css(_class);//缩小
_enlargeTransform = objTransform - 0.1;
}
imgPreview("",undefined,_transformList);
}
// 鼠标滚轮
let _newNum = 0;
function img(objTransform){
let _transformSrc = $(".previewBody img").attr("src");//图片路径
let _transformId = $(".previewBody img").attr("id");//图片Id
_transformList = {
"src":_transformSrc,
"id":_transformId
}
let _class = "";
document.onmousewheel = function (e) {
// IE和谷歌
if (e.wheelDelta > 0) {
_class = {
transform:"scale("+objTransform + 0.1 +")"
}
$(".previewBody img").css(_class);//放大
_enlargeTransform = objTransform + 0.1;
imgPreview("",undefined,_transformList);
} else {
_class = {
transform:"scale("+objTransform - 0.1 +")"
}
$(".previewBody img").css(_class);//缩小
_enlargeTransform = objTransform - 0.1;
imgPreview("",undefined,_transformList);
}
}
// 火狐
document.addEventListener('DOMMouseScroll', (e) => {
if (e.detail > 0) {
_class = {
transform:"scale("+objTransform - 0.1 +")"
}
$(".previewBody img").css(_class);//缩小
_enlargeTransform = objTransform - 0.1;
imgPreview("",undefined,_transformList);
} else {
_class = {
transform:"scale("+objTransform + 0.1 +")"
}
$(".previewBody img").css(_class);//放大
_enlargeTransform = objTransform + 0.1;
imgPreview("",undefined,_transformList);
}
}, false);
}
// 还原
function imgReduction(){
let _transformSrc = $(".previewBody img").attr("src");//图片路径
let _transformId = $(".previewBody img").attr("id");//图片Id
_transformList = {
"src":_transformSrc,
"id":_transformId
}
let _class = {
transform:"scale("+ 1 +")"
}
$(".previewBody img").css(_class);//放大
_enlargeTransform = 1;
imgPreview("",undefined,_transformList);
}
// 拖动方块互换位置(使用H5的拖放)
function divDraggable(){
// 获取所有图片块
let _divClass = document.getElementsByClassName("containerTow");
//用来保存图片块
let _cont = null;
for(let i = 0,len = _divClass.length;i < len;i++){
// 拖动是将div块保存到_cont
_divClass[i].ondragstart = function(){
_cont = this;
}
// 阻止默认事件
_divClass[i].ondragover = function (){
event.preventDefault();
}
//拖动结束时,在当前位置下 进行drop事件
let _draggable = document.getElementById("draggable");
_divClass[i].ondrop = function(){
if(_cont != null && _cont != this){
let _thisDiv = document.createElement("div");
_draggable.replaceChild(_thisDiv,this);
_draggable.replaceChild(this,_cont);
_draggable.replaceChild(_cont,_thisDiv);
}
}
}
}
// 保存检查
function preservation(){
let _imgContainer = $("#draggable div.containerTow");
let _kg = false;
for(let i = 0,len = _imgContainer.length;i < len;i++){
let _imgData = _imgContainer[i];
let _imgSrc = $(_imgData).find("img").attr("src");
if(_imgSrc == ""){
let _indexNum = $(_imgData).find("img").attr("data_num")
alert("请上传第" + _indexNum + "张图片!");
return;
}
}
alert("请求方法");
}
总结
学无止境,遇事不慌,最后你会发现没有那么难!
更多推荐
所有评论(0)