【JavaScript】文件上传 一次上传多个文件 判断文件是否为空

本文介绍如何使用HTML和JavaScript实现文件上传功能,包括一次上传多个文件的操作,并提供了一个简单的判断文件是否为空的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//上传一个文件
HTML:

<form id="uploadFileForm">
    <input type="file" name="file" id="updateFileInput"/>
</form>
$("#uploadFile\Form").change(function(){
     var formData = new FormData($('#uploadFileForm')[0]);
     //如果上传的文件不为空
     if($("input[type='file']").val() != ""){  
        //打开loading层
        var index = layer.load(1, {
            shade: [0.2,'#fff'] 
        });
        //ajax上传数据
        $.ajax({
            cache:false,
            contentType: false,
            processData: false,
            url:接口地址,
            type:'POST',
            enctype:'multipart/form-data',
            data:formData,
            dataType:'JSON',
            success:function (data) {
                //上传成功的回调
                layer.close(index);
            }
        })
    }
})

//上传多个文件 , 给input加个multiple属性

<form id="uploadFileForm">
    <input type="file" name="file" id="updateFileInput" multiple/>
</form>
 $("#uploadFileHiddenForm").change(function(){
    var formData = new FormData();
    var files = $('#updateFileInput')[0].files;
    for (var i = 0; i < files.length; i++) {
        formData.append("file" + i, files[i]);
    }
    //如果上传的文件不为空
    if($("input[type='file']").val() != ""){        
        //打开loading层
        var index = layer.load(1, {
            shade: [0.2,'#fff'] 
        });         
        $.ajax({
            cache:false,
            contentType: false,
            processData: false,
            url:U('upload/projectFileUpload'),
            type:'POST',
            async:false,
            enctype:'multipart/form-data',
            data:formData,
            dataType:'JSON',
            success:function (data) {
                //上传成功的回调
                layer.close(index);
            }
        })
    }
})

//判断文件是否为空

if($("input[type='file']").val() != "")
{
    console.log("文件不为空!");
    return;
}
else
{
    console.log("请选择文件上传!");
    return;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值