file 自定义上传附件并展示缩略图

效果图镇楼。。

写的有点乱。上传一个实例供大家参考--附件下载地址如何下：

https://files.cnblogs.com/files/fchx91/uploadFiles.rar

2019-04-08 补充

之前给后台传输的数据格式不太正确。只能拿到给定的一些 name，size，url 这些值。后台需要直接读取files 。

解决思路是：每一次的 appPic 成功后都会 clone 出一个新的 Input[type=file] ，用来存放 file 相关值。

HTML--

新增用来存放图片对应的 Input [type=file] ---只用来存值，不用可见。

<div id="picInputDiv" style="display: none;"></div>

JS----

$("#addpic).change() 中增加：

var newInput = $(this).clone();
newInput.attr("id","newInput"+(picFileLen-1));  //  picFileLen 是个变量。所以每次拿到的 input id 唯一，避免冲突

$("#picInputDiv").append(newInput);

button.delete---

删除一个图片时，$("#newInput"+parIndex) 也要删除。并且，$("#newInput"+parIndex) 只有的兄弟节点，id 属性都要-1

// picInputDiv index>picIndex 角标依次 -1;
var inputLen = $("#picInputDiv").children().length;
var Dvalue = inputLen-1-parIndex;
if(Dvalue ==0) {
    $("#picInputDiv").find("#newInput"+parIndex).remove();
} else if(Dvalue > 0) {
    $("#picInputDiv").find("#newInput"+parIndex).remove();
    for(var i=1; i<Dvalue+1; i++){
        $("#newInput"+(parIndex+i)).attr("id","newInput"+(parIndex+i-1));
    }
}

上传附件是工作中经常用到的。一般会直接考虑 input type=file

定义文件选择字段和“浏览。。。”按钮，供文件上传。

弊端--

样式不OK，
只能显示附件名称
不能显示附件缩略图
只能保留最后一次的上传结果，不能实现多个上传

针对以上问题。本来打算使用 dropzone.js。奈何在插件使用中遇到诸多问题，最后索性自己写了 -_-||| --【dropzone.js 还需要后续好好研究下】

结构--

点击区域，实现 file 上传功能

<button class="btn-add" data-type="pic"></button> // file 的外套

<input type="file" id="addPic" class="btn-add-file" /> // input[type=file] 功能继续保持。但是 opacity=0; 隐藏不可见

</div>

图片信息展示区

js--

file 可以给我们提供什么呢？？？

每次点击 file 传入的内容都不同，想要展示每一个附件相关信息？？

click function-->

var picFile = []; //用来存放每一次的 file；解决 input 职能留存最后一个 file 的问题

var file = document.getElementById("addPic").files[0]; //file 是一个对象

picFile.push(file);

var iName = document.getElementById("addPic").files[0].name; //很奇特。如果这个地方用 file 来替换 document ；会报错！！

var iSize = Math.round(document.getElementById("addPic").files[0].size / 1024); // 换算成 kb 单位

var sizeInfo; // 如果大于 1M；则换算为 mb 单位

if (iSize>1024){

sizeInfo = Math.round(iSize / 1024 )+"Mb";

} else {

sizeInfo = iSize +"Kb";

}

var iUrl = URL.createObjectURL($(this)[0].files[0]); //将本地附件的链接地址转成实际应用的地址！！

var html ="<div class='pic-thumbnail' data-unique='"+iName+"'><button class='delete-content'></button>"; // 加入删除按钮

html += "<p data-value='picName'><strong>"+iName+"</strong></p>"; // 附件名称

html += "<span data-value='picSize'>"+sizeInfo+"</span>"; // 附件大小

html += "<img data-value='picImg' width='130px' src='"+iUrl+"' alt='"+iName+"' />"; //缩略图--遗憾的是，没有点击预览的效果；lightgallery 的融合有问题--后续研究的方向！

$("#picShowDiv").append(html); //追加到 picShowDiv中，依次展示

button.delete-content -->

点击删除按钮，需要找到 parent().index() 角标。

picFile.splice( index, 1 );

优化-->

针对上传有上限的情况

// 监测是否超出限制
function checkLen(len,max){
    if(len<max){
        return true;
    } else {
        layer.msg("不能再上传了。已经满额 ");
        return false;
    }
}

CSS--

/*
 点击上传附件
*/
.btn-add-div {
    width: 150px;
    height: 150px;
    position: relative;
    margin-right: 10px;
    display: inline-block;
}
#picShowDiv {
    display: inline-block;
}
.btn-add {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    border: 1px dashed #ccc;
    border-radius: 5px;
    background: #fff;
    outline: none;
}
.btn-add:before {
    content: '';
    position: absolute;
    width: 32px;
    height: 2px;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -1px;
    background: #aaa;
}
.btn-add:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 32px;
    left: 50%;
    top: 50%;
    margin-left: -1px;
    margin-top: -16px;
    background: #aaa;
}
.btn-add-file {
    position: absolute;
    display: block;
    width: 100% !important;
    height: 100%;
    opacity: 0;
}
.btn-add-div:hover {
    cursor: pointer;
}

/* 缩略图 */
.pic-thumbnail {
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    padding: 10px;
    overflow:  hidden;
    display: inline-block;
    border: 1px dashed #ccc;
    background: #fff;
    position: relative;
    border-radius: 5px;
    margin-right: 10px;
}
/* 删除 */
.delete-content {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height:20px;
    border-radius: 50%;
    background: #555;
    border: none;
    z-index: 10;
}
.delete-content:before {
    display: inline-block;
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    left: 6px;
    top: 2px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: #fff;
    transform: rotate(45deg);
}
.delete-content:after {
    display: inline-block;
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    left: 6px;
    top: 10px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: #fff;
    transform: rotate(-135deg);
}
.delete-content:hover {
    cursor: pointer;
    opacity: .7;
}

秒客网

file 自定义上传附件并展示缩略图

相关文章