Js批量上传图片以及信息_批量上传图片js-CSDN博客

本文链接：https://blog.csdn.net/qq_30949371/article/details/107184215
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css"/>
        <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css"/>
        <!-- body 最后 -->
        <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
        <!-- 如果使用了某些拓展插件还需要额外的JS -->
        <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
        <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
        <style>
            body, html, input {
                font-family: "微软bai雅黑";
            }
        </style>
    </head>
    <body>

            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label  class="weui-label">巡检人</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" name="taskName" id="taskName" type="text" placeholder="0250"/>
                    </div>
                </div>
            </div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label  class="weui-label">时间</label></div>
                <div class="weui-cell__bd">
                    <input type="text" class="weui-input" placeholder="选择日期" id='datetime-picker' />
                </div>
            </div>
        </div>
            <div class="weui-cells__title">巡检描述</div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea"  name="taskDesc" id="taskDesc" placeholder="输入描述" rows="3"></textarea>
                        <!-- <div class="weui-textarea-counter"><span>0</span>/200</div> -->
                    </div>
                </div>
                <div class="weui-cells__title">上传图片</div>
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles" style="margin-left: 1%;width: 103%;">

                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*"
                                       multiple="" />
                            </div>
                        </div>

                    </div>

                    <a href="javascript:;" onclick="isSubmit()" class="weui-btn weui-btn_primary ">提交</a>
                </div>
                <!-- weui-btn_loading -->
                <script>

                    function isSubmit(){
                        var taskName = $("#taskName").val();
                        $("#datetime-picker").val().toString()
                        var taskDate = $("#datetime-picker").val().toString();
                        var taskDesc = $("#taskDesc").val();
                        var formdata = new  FormData();//存放图片Base64路径
                        var imgLengthCount = $(".weui-uploader__files li img").length;
                        for (var i = 0;i<imgLengthCount;i++){
                            formdata.append("base_"+i,$(".weui-uploader__files li img").eq(i).attr('src'));
                        }
                        formdata.append("taskName",taskName);
                        formdata.append("taskDate",taskDate);
                        formdata.append("taskDesc",taskDesc);
                        formdata.append("imgLengthCount",imgLengthCount);
                        var objData = {};

                        formdata.forEach((value, key) => objData[key] = value);

                        console.log(JSON.stringify(objData))


                    }


                    $("#datetime-picker").datetimePicker();
                    var eleFile = document.querySelector('#uploaderInput');
                    // 压缩图片需要的一些元素和对象
                    var reader = new FileReader();
                    var imga = document.getElementById('imga');
                    var img = new Image();
                    // base64地址图片加载完毕后
                    img.onload = function () {
                        var originWidth = this.width, //image resize   压缩后的宽
                            originHeight = this.height,
                            maxWidth = 400, maxHeight = 400,
                            quality = 0.8, //image quality  压缩质量
                            canvas = document.createElement('canvas'),
                            drawer = canvas.getContext("2d");
                        canvas.width = maxWidth;
                        canvas.height = originHeight / originWidth * maxWidth;
                        drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
                        //上传到七牛云base64
                        var base64 = canvas.toDataURL("image/jpeg", quality); // 这里就拿到了压缩后的base64图片
                        //console.log(base64);
                        //blob对象
                        canvas.toBlob(function (blob) {
                            //console.log(blob)
                        }, "image/jpeg", quality);
                        var file = dataURLtoFile(base64, 'name');
                        console.log(file);
                        var item = "<li class='weui-uploader__file' style='width: 30%;'><img src='" + base64 + "' style='width: 100%;height: 77px;'></li>"
                        $("#uploaderFiles").append(item);
                    };
                    //base64转file
                    //filename图片的名字dataurl是base64地址
                    function dataURLtoFile(dataurl, filename) {
                        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                        while (n--) {
                            u8arr[n] = bstr.charCodeAt(n);
                        }
                        return new File([u8arr], filename, {type: mime});
                    }

                    // 文件base64化，以便获知图片原始尺寸
                    reader.onload = function () {
                        //reader.result就是base64
                        img.src = reader.result;
                    };
                    //addEventListener监听change事件
                    eleFile.addEventListener('change', function () {
                        file = this.files[0];
                        // 选择的文件是图片
                        if (file.type.indexOf("image") == 0) {
                            //console.log(file);
                            reader.readAsDataURL(file); //以数据url的方式读取文件内容

                        }
                    });
                </script>
    </body>
</html>