PC端多图批量上传前端的代码

最新推荐文章于 2024-04-26 08:49:39 发布

reg183

最新推荐文章于 2024-04-26 08:49:39 发布

阅读量226

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chendongpu/article/details/119106548

版权

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

在这里插入图片描述

关键代码:



<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>上传插件</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <style type="text/css">
        .shade {
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.55);
        }

        .shade div {
            width: 300px;
            height: 200px;
            line-height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            background: white;
            border-radius: 5px;
            text-align: center;
        }



        .btn input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }


        .img_div{min-height: 100px; min-width: 100px;}
        .isImg{width: 120px; height: 120px; position: relative; float: left; margin-left: 10px;}
        .removeBtn{position: absolute; top: 0; right: 0; z-index: 11; border: 0px; border-radius: 50px; background: red; width: 22px; height: 22px; color: white;}
        .shadeImg{position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 15;
            text-align: center;
            background: rgba(0, 0, 0, 0.55);}
        .showImg{width: 400px; height: 500px; margin-top: 140px;}

    </style>
</head>
<body>

<section class="tent_info">

    <div class="col-md-12 col-sm-12 col-xl-12 textarea one">
        <textarea class="text_send" id="text_send" name="tip"></textarea>
        <div class="field field-text-field col-sm-12" data-type="TextField" >
            <div class="img_div">
            </div>
            <a href="javascript:;" class="btn" style="float:left;width:200px;">
                <input type="file"  name="myFile" id="myFile" multiple="multiple" />点击这里上传文件
            </a>


            <div class="shadeImg" onclick="javascript:closeShadeImg()">
                <div class="">
                    <img class="showImg" src="">
                </div>
            </div>
        </div>

        <div class="col-md-12 col-sm-12 col-xl-12 btn btn_send">提交</div>
    </div>

</section>

<div class="shade" onclick="javascript:closeShade()">
    <div class="">
                    <span class="text_span">

                    </span>
    </div>
</div>

</body>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script>


    function getObjectURL(file) {
        var url = null;
        if(window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if(window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        //console.log(url);
        return url;
    }

    function blobToBase64(file,callback){
        var reader = new FileReader();
        reader.onload = function(e){
            callback(e.target.result);
        };
        reader.readAsDataURL(file);
    }

    var filesList=[];
    var base64=[];
    $(".btn_send").on('click',function(){
        var text_send = $("#text_send").val();
        console.log("files--",document.getElementById("myFile").files);
        $.post('./ajax/add.php',{base64:base64,text_send:text_send},function (data){

        },'json')
    });
    $(function() {

        var objUrl;
        var img_html;
        $("#myFile").change(function(data) {
            console.log("data.files:",data.target.files);
            console.log("data.files.length:",data.target.files.length);

            if(data.target.files.length==0){
                $(".text_span").text("没有选择图片");
                $(".shade").fadeIn(500);
                return false;
            }


            var EXTILIGAL=true;
            for(let index = 0; index <  data.target.files.length; index++) {
                var filepath = data.target.files[index].name;
                var extStart = filepath.lastIndexOf(".");
                var ext = filepath.substring(extStart, filepath.length).toUpperCase();
                if( ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
                    EXTILIGAL= false;
                }
            }

            if(!EXTILIGAL){
                $(".shade").fadeIn(500);
                $(".text_span").text("图片限于bmp,png,gif,jpeg,jpg格式");
                return;
            }

            var SIZEILIGAL=true;
            var file_size = 0;
            var all_size = 0;
            for(j = 0; j < data.target.files.length; j++) {
                file_size = data.target.files[j].size;
                all_size = all_size + data.target.files[j].size;
                var size = all_size / 1024;
                if(size > 500) {
                    SIZEILIGAL=false;
                }
            }

            if(!EXTILIGAL){
                $(".shade").fadeIn(500);
                $(".text_span").text("上传的图片大小不能超过100k！");
                return;
            }



            for(let index = 0; index <  data.target.files.length; index++) {
                filesList.push(data.target.files[index]);
            }


            var img_div = $(".img_div");


            $(".img_div").html("");
            base64=[];
            for(var i = 0; i < filesList.length; i++) {
                objUrl = getObjectURL(filesList[i]);
                img_html = "<div class='isImg'><img src='" + objUrl + "'  style='height: 100%; width: 100%;' /><button class='removeBtn' οnclick='javascript:removeImg("+i+")'>x</button></div>";
                img_div.append(img_html);


                //异步转换
                blobToBase64(filesList[i],function(res){
                    base64.push(res);
                })

            }
            
            return true;
        });

    });

    function removeImg(i){
        filesList = filesList.filter(function(item,index){
            if(index!==i){
                return item;
            }
        });
        var img_div = $(".img_div");
        $(".img_div").html("");
        base64=[];
        for(var index = 0; index < filesList.length; index++) {
            var objUrl = getObjectURL(filesList[index]);
            var img_html = "<div class='isImg'><img src='" + objUrl + "'  style='height: 100%; width: 100%;' /><button class='removeBtn' οnclick='javascript:removeImg(" + index + ")'>x</button></div>";
            img_div.append(img_html);

            //异步转换
            blobToBase64(filesList[index],function(res){
                base64.push(res);
            })
        }


    }

    function closeShade(){
        $(".shade").fadeOut(500);
    }

    function closeShadeImg(){
        $(".shadeImg").fadeOut(500);
    }

</script>
</html>

代码下载

reg183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
PC端多图批量上传前端的代码

关键代码:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <title>上传插件</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="te.
复制链接

扫一扫