Ajax文件上传带进度条、文件类型、大小、数量等获取、限制

最新推荐文章于 2023-02-17 15:03:02 发布

MuGuiLin

最新推荐文章于 2023-02-17 15:03:02 发布

阅读量2.2k

点赞数 2

分类专栏： HTML5 ES6-10 / TS jQuery 文章标签：上传文件accept限制 input type=file 前端input文件类型限制属性上传文件进度条 multiple、accept

本文链接：https://blog.csdn.net/muguli2008/article/details/70199473

版权

ES6-10 / TS 同时被 3 个专栏收录

32 篇文章 2 订阅

订阅专栏

HTML5

16 篇文章 1 订阅

订阅专栏

jQuery

10 篇文章 1 订阅

订阅专栏

$ajax 文件上传，带进度条，文件类型，文件大小。 Web前端代码

效果图：

使用说明：

1、复制以下代码，创建一个新的html文件，粘贴对应的代码。

2、引入jQuery文件，或 CDN地址。

3、配置后端服务器上传地址。

HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>文件上传 带 进度条 $ajax</title>
</head>

<body>
    <h1>文件上传 带 进度条 $ajax</h1>
    <hr />
    <form action="" method="" enctype="multipart/form-data">
        <a class="opts_btn" href="javascript:void(0)">
            <label id="opst_txt">选择上传文件</label>
            <input type="file" id="oFile" class="oFile" name="myFiles" onchange="FileChangeFn(event)" />
        </a>
        <label id="file_size"></label><br /><br />

        <div id="file_box"></div>
        <div class="speed_box">
            <div id="speed">0%</div>
        </div>
        <label id="file_type"></label>
        <button type="button" class="send_btn" onclick="UploadFileFn()">开始上传文件</button>
        <div class="clear"></div>
    </form>
</body>


<!-- 请正确引入jquery文件 -->

<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>

</html>

CSS代码：

h1{text-align: center;}
form{width:600px;  margin: auto; padding: 20px 50px; border: 1px solid #0091f2; border-radius: 10px; display: block; }
input{ font-size: 24px; margin: 10px;}
.clear{clear: both;}
.speed_box{ width: 600px; height: 20px; display: none; border: 1px solid #0091f2; border-radius: 10px; overflow: hidden;}
#file_box{ min-width:600px; min-height: 300px; border: 1px solid #0091f2; border-radius: 10px; display: inline-block; background: #EEE; overflow: hidden; z-index: 999999;}
#speed{ width: 0; height: 100%; background: #0091f2; color: white; text-align: center; line-height: 20px; font-size: 16px;}
#file_size ,#file_type{ display: inline-block;  padding: 0px 16px; font-size: 16px; color: #0091f2; font-weight: bold;}
#file_type{ margin-top: 30px;}
.opts_btn{ position:relative; display: inline-block; padding: 8px 16px; font-size:16px;color:white; text-decoration: none;background:#0091f2; border: 2px solid #0091f2; border-radius: 3px; cursor: pointer; overflow: hidden;}
.oFile{position:absolute;width:100%;height:100%;z-index: 10;top:0px;left:0px;visibility: hidden;}
.send_btn{ display: inline-block; display: none; float: right; margin-top: 20px; padding: 8px 16px; font-size: 16px; color:white; background: #0091f2; border: 1px solid transparent; border-radius: 2px; cursor: pointer;}

JS代码：

//文件选择完毕时
    function FileChangeFn(event) {
        $('.opst_txt').text('重新选择文件');
        $('.send_btn').show();
        var event = event || window.event,
            dom = '',
            ofile = $("#oFile").get(0).files[0],
            otype = ofile.type,
            osize = ofile.size / 1054000,
            ourl = window.URL.createObjectURL(ofile); //文件临时地址
        $('#file_type').text("选择上传文件类型：" + ofile.type);
        $('#file_size').text("选择上传文件大小，共" + osize.toFixed(2) + "MB。");

        console.log("文件类型：" + otype); //文件类型
        console.log("文件大小：" + osize); //文件大小


        if ('video/mp4' == otype || 'video/avi' == otype || 'video/x-msvideo' == otype) {
            dom = '<video id="video" width="100%" height="100%" controls="controls" autoplay="autoplay" src=' + ourl + '></video>';
        }
        if ('audio/mp3' == otype || 'audio/wav' == otype) {
            dom = '<audio id="audio" width="100%" height="100%" controls="controls" autoplay="autoplay" loop="loop" src=' + ourl + ' ></audio>';
        }
        if ('image/jpeg' == otype || 'image/png' == otype || 'image/gif' == otype) {
            dom = '<img id="photo" width="100%" height="100%" alt="我是image图片文件" src=' + ourl + ' title="" />';
        }
        $('#file_box').html(dom);
    };

    //侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
    function OnProgRess(event) {
        var event = event || window.event;
        //console.log(event);  //事件对象
        console.log("已经上传：" + event.loaded); //已经上传大小情况(已上传大小，上传完毕后就 等于 附件总大小)
        //console.log(event.total);  //附件总大小(固定不变)
        var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比  
        $("#speed").html(loaded + "%").css("width", loaded + "%");
    };


    //开始上传文件
    function UploadFileFn() {
        $('.speed_box').show();
        var oFile = $("#oFile").get(0).files[0],//input file标签
            formData = new FormData();   //创建FormData对象
        xhr = $.ajaxSettings.xhr(); //创建并返回XMLHttpRequest对象的回调函数(jQuery中$.ajax中的方法)
        formData.append("myFiles", oFile); //将上传name属性名(注意：一定要和 file元素中的name名相同)，和file元素追加到FormData对象中去

        $.ajax({
            type: "POST",
            url: "fileAction2.php", //后端服务器上传地址
            data: formData, //formData数据
            cache: false, //是否缓存
            async: true, //是否异步执行
            processData: false, // 是否处理发送的数据  (必须false才会避开jQuery对 formdata 的默认处理)
            contentType: false, // 是否设置Content-Type请求头
            xhr: function () {
                if (OnProgRess && xhr.upload) {
                    xhr.upload.addEventListener("progress", OnProgRess, false);
                    return xhr;
                }
            },
            success: function (returndata) {
                $("#speed").html("上传成功");
                //alert(returndata);  
            },
            error: function (returndata) {
                $("#speed").html("上传失败");
                console.log(returndata)
                alert('请正确配置后台服务！');
            }
        });
    };

扩展：

html5 file 在选择上传文件的时候，根据需要可限制指定的文件类型(默认任意类型 )。在 input type="file" 加上 accept="指定要上传的文件类型"即可

例如：

<input type="file" id="oFile" name="myFiles" accept=".doc, .docx, .xls, .txt" onchange="FileChangeFn(event)" />

accept=".doc, .docx, .xls, .txt" 只能上传word, exls, .txt文件

accept=".rar, .zip" 只能上传压缩文件

accept=".mp3" 只能上传mp3文件

accept=".mp4, .avi, .swf, .mpeg" 只能上传视频文件

accept=".jpg, .jpeg .png, .gif, .bmp" 只能上传指定的这些图片文件

accept="image/*" image表示图片，*表示所有支持的格式， video/* video表示视频，*表示所有支持的格式

accept="video/mp4, .avi, audio/mp3, .ogg, image/jpeg, .png, .gif" 可选择、指定多种不同类型、格式

注：如果不加accept属性，则上传任意类型的文件(默认)

html5 file 在选择上传文件的时候，根据需要可限制选择 1个(single) 或多个(multiple) 文件。在 input type="file" 加上 multiple 属性即可

例如：

<input type="file" id="oFile" name="myFiles" multiple onchange="FileChangeFn(event)" />

加上 multiple 属性就可以多选啦：可按住鼠标左键拖动进行多选，或按下键盘上的Ctrl键，或 Shitf键再鼠标左键点选，或 Ctrl + A 全选

注：默认情况下一般都没加multiple 属性，所以只能选择1件文件

最后：如果以上两种情况都要用到时，就同时加上 multiple属性和 accept="指定要上传的文件类型"属性即可！

例如：

<input type="file" id="oFile" name="myFiles" multiple accept=".jpg, .jpeg .png, .gif, .bmp" onchange="FileChangeFn(event)" />

MuGuiLin

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录