ajax多图拖拽上传的例子

最新推荐文章于 2024-05-09 14:38:11 发布

大鹏展翅888

最新推荐文章于 2024-05-09 14:38:11 发布

阅读量151

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/zhupengfei/article/details/107533472

版权

html 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

功能：

1、ajax上传，多图上传

2、可以拖拽，可以点击选择，支持多图上传

效果图

前端代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <title>COS图片手动上传</title>
    <link rel="icon" href="https://yb-1256969239.cos.na-toronto.myqcloud.com/default/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="https://yb-1256969239.cos.na-toronto.myqcloud.com/default/favicon.ico"
        type="image/x-icon" />
    <style>
        #dropbox {
            width: 1000px;
            height: 150px;
            line-height: 70px;
            text-align: center;
            border: 2px dashed #999;
            border-radius: 5px;
            background: #fbfbfb;
            color: #666;
        }

        #preview>img {
            height: 80px;
            margin: 7px;
            border: 1px solid #666;
            border-radius: 4px;
            box-shadow: 3px 3px 3px #bbb;
        }

        #outbox {
            display: inline-block;
            position: relative;
            overflow: hidden;
        }

        #imgUpload {
            position: absolute;
            left: 0px;
            font-size: 60px;
            opacity: 0;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
</head>

<body>
    <form>
        <h1>COS图片手动上传</h1>
        <div id="outbox">
            <div id="dropbox">
                <input id="imgUpload" type="file" multiple>
                <span>点击或将单个/多个图片拖放到此处</span>
            </div>
        </div>
        <div id="preview"></div>
        <script>
            var dropbox, imgUpload;

            dropbox = document.getElementById("dropbox");
            dropbox.addEventListener("dragenter", dragenter, false);
            dropbox.addEventListener("dragover", dragover, false);
            dropbox.addEventListener("dragleave", dragleave, false);
            dropbox.addEventListener("drop", drop, false);

            imgUpload = document.getElementById("imgUpload");
            imgUpload.addEventListener("change", readFile, false)

            // 目标进入drop区域
            function dragenter(e) {
                e.stopPropagation();
                e.preventDefault();
                dropbox.style.background = '#666'
            }
            // 目标位于drop区域上方
            function dragover(e) {
                e.stopPropagation();
                e.preventDefault();
            }
            // 目标离开drop区域
            function dragleave(e) {
                e.stopPropagation();
                e.preventDefault();
                dropbox.style.background = '#fbfbfb';
            }
            // 目标在drop区域被释放/放置（松开鼠标）
            function drop(e) {
                e.stopPropagation();
                e.preventDefault();
                dropbox.style.background = '#fbfbfb';

                var dt = e.dataTransfer;
                var files = dt.files;

                //拖动松开鼠标后上传
                handleFiles(0, files);
            }
            //点击上传文件后上传
            function readFile() {
                handleFiles(0, this.files);
            }
            $('#loadingDiv').hide();
            function handleFiles(i, files) {
                if (i >= files.length) {
                    layer.closeAll('loading');
                    layer.msg('全部上传完成！');
                    i = 0;
                    return;
                }
                var file = files[i];
                console.log(file);

                if (!file.type.match(/image*/))
                    return;
                layer.msg('上传中..' + (i + 1) + '/' + files.length, { icon: 16, shade: 0.01 });
                var form = new FormData();
                form.append("filename", file, file.name);
                $.ajax({
                    "url": "/media/v1/upload",
                    "method": "POST",
                    "timeout": 0,
                    "processData": false,
                    "mimeType": "multipart/form-data",
                    "contentType": false,
                    "data": form,
                    beforeSend: function (xhr) {
                        console.log(i, 'beforeSend');
                    },
                    success: function (resp) {
                        console.log(resp);
                        var ret = JSON.parse(resp);
                        if (ret.code != 0) {
                            layer.msg(ret.msg, { icon: 5 });
                            return;
                        }
                        console.log(ret.data);

                        var img = document.createElement("img");
                        img.classList.add("obj");
                        img.file = file;
                        preview.appendChild(img);

                        var span = document.createElement("span");
                        span.innerText = ret.data.list[0].path;
                        preview.appendChild(span);

                        preview.appendChild(document.createElement("br"));

                        var reader = new FileReader();
                        reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img);
                        reader.readAsDataURL(file);
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                        layer.alert(error, { icon: 5 });
                    },
                    complete: function (xhr, status) {
                        console.log(i, 'complete');

                        i++;
                        handleFiles(i, files);
                    },
                });
            }
        </script>
    </form>
</body>

</html>

后端代码不再写了，各语言有所不同。

大鹏展翅888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax多图拖拽上传的例子

功能：1、ajax上传，多图上传2、可以拖拽，可以点击选择，支持多图上传效果图前端代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=..
复制链接

扫一扫