文件上传简单整理

最新推荐文章于 2022-09-22 19:10:10 发布

桐溪漂流

最新推荐文章于 2022-09-22 19:10:10 发布

阅读量86

点赞数

分类专栏： html js 文章标签： javascript html5

本文链接：https://blog.csdn.net/qq564280420/article/details/113387897

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

文件上传

1. html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <div>
        <button id="upload" class="btn" data-type="upload">点击上传</button>
        <input type="file" multiple id="fileInput" name="files" value="" style="display: none;">
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="upload.js"></script>
</html>

2. upload.js部分

$(function(){
    var currentPage = {
        /**
         * 多文件上传
         * @param {formData} params { files }
         * @param {*} callback 成功的回调
         */
        uploadFilesAction: function (params, callback, errorFunc) {
            if (params instanceof FormData) {
                var files = params.getAll('files');
                var flag = true, msg = '';
                if (files.length > 5) {
                    flag = false;
                    msg = '单次文件上传最多支持五个同时上传';
                } else {
                    for (var i = 0; i < files.length; i++) {
                        if (files[i].size > 1024 * 1024 * 200) {
                            flag = false;
                            msg = '单个文件大小不能超过200MB，请检查';
                        }
                    }
                }
                if (!flag) {
                    if(errorFunc){
                        errorFunc();
                    }
                    // $.toast(msg, { type: 'err' });此处可以提示msg错误
                    return false;
                }
            } else {
                // $.toast('文件上传需要使用formData类型的数据', { type: 'err' });
                if(errorFunc){
                    errorFunc();
                }
                return false;
            }
            $.ajax({
                type: 'post',
                url: '/api/uploadurl',
                data: params,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (callback) {
                        callback(res);
                    }
                },
                error: function (err) {
                    if(errorFunc){
                        errorFunc();
                    }
                    // 可以添加上传失败提示
                }
            })
        },
        setListen: function(){
            // 对btn点击监听
            $(document).on('click', '.btn', function(e){
                e.preventDefault();
                e.stopPropagation();
                var _this = e.target;
                var type = $(_this).data('type');
                if(type === 'upload'){// 点击上传
                    $("#fileInput").click();
                }
            })
            // 对input的change事件监听
            $(document).on('change', '#fileInput', function(e){
                e.preventDefault();
                e.stopPropagation();
                var _this = e.target;
                var files = _this.files;
                var formData = new FormData();
                for(var i = 0;i < files.length;i++){
                    formData.append('files', files[i]);
                }
                currentPage.uploadFilesAction(formData, function(){
                    // 上传成功的操作
                }, function(){
                    // 上传失败的操作
                });
            })
        },
        /**
         * 页面初始化
         */
        pageInit: function(){
            currentPage.setListen();
        }
    }
    currentPage.pageInit();
})

桐溪漂流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件上传简单整理

文件上传1. html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件上传</title></head><body> &l
复制链接

扫一扫