jquery实现上传多个文件(file类型),并能单个删除

责编:menVScode 2017-09-13 18:00 阅读(836)

        下面demo实现功能有:1、支持上传多个文件;2、可单独删除某个文件;3、可限制上传的文件类型;4、不允许同名文件再次上传。

css代码

.upLink{text-decoration: none;cursor: pointer;}
.upLink:hover{text-decoration:underline;}
.fileBox{position:relative;width:184px;padding-left:36px;padding-right:33px;height:36px;line-height:36px;background-image:url("fileImage.png");background-position:10px 8px;background-repeat:no-repeat;background-size:16px 20px;background-color:#dbdbdb;margin:5px 4px;float:left;}
.fileDel{z-index:2;position:absolute;top:6px;right:8px;display:block;width:23px;height:23px;background-image:url("fileDelete.png");background-position:0 0;background-repeat:no-repeat;background-size:23px 23px;}
.fileBox span{font-size:14px;color:#393838;}

html代码

<div class="morefileUp" style="margin-bottom:10px;margin-left: 14px;">
    <a class="upLink" style="margin-bottom:10px;"><img src="uplink_icon.png">
        <span style="color: #333333;" onclick="openFile()">  点击此处上传文件</span>
    </a>

    <input type="hidden" value="" name="projectid"/>
    <div id="newUpload1" class="clearfix" style="overflow:hidden;">

    </div>
</div>

js代码

var aHtml,fileName;
var i=0;
var fileArr = [];
var arr = ['doc','docx','pdf','xlsx','xls','txt'];

function writeDown(obj){
    var thisFile=obj.val();
    fileName = thisFile.split("\\").pop();//获取文件名
    fileHou = thisFile.split('.').pop();//获取文件后缀
    //console.log(thisFile)

    //不能上传同的文件
    if(isInArray(fileArr,fileName)){
        console.log(fileArr);
        alert('文件已经存在,请勿重复上传');
        return false;
    }
    fileArr.push(fileName);

    //文件后缀限制
    if(isInArray(arr,fileHou)){
        obj.siblings("span").html(fileName);
        obj.parent().show();
    }else{
        alert('请上传正确的格式的文件');
        return false;
    }
}

//删除某个附件
function delFile(obj){
    obj.parent().remove();
}

function openFile(){
    var fileId="file"+i;
    aHtml="<div class='fileBox' id='div_"+i+"' style='display:none;'><input type='file' name='excelFile' id='"+fileId+"' onchange='writeDown($(this))'  style='display:none;'><span class='spanId'></span><a class='fileDel' onclick='delFile($(this))'></a></div>";
    $("#newUpload1").append(aHtml);
    $("#"+fileId).click();
    i++;
}

function isInArray(arr,value){
    for(var i = 0; i < arr.length; i++){
        if(value === arr[i]){
            return true;
        }
    }
    return false;
}

 效果预览

QQ截图20170913165302

        完整demo下载链接:http://pan.baidu.com/s/1hrI6OWc 密码:axog

标签: jquery 文件 file
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码