添加 车辆行驶证照片和车辆照片上传功能

chenhaozhe

2025-11-30 844e336420ffa627322b6f85a47cc345a256eb38

添加 车辆行驶证照片和车辆照片上传功能

 WebTM/views/»ù´¡×ÊÁÏ/¹«Óûù´¡×ÊÁÏ/Add_Edit_Gy_Car.html

@@ -114,8 +114,18 @@
                                            <label class="layui-form-label">车辆行驶证照片</label>
                                            <div class="layui-input-inline">
                                                <input type="text" class="layui-input" id="HCarCardIDPic"
                                                    name="HCarCardIDPic">
                                                    style="color: blue;cursor: default;" name="HCarCardIDPic" readonly>
                                            </div>
                                            <button type="button" lay-submit="" class="layui-btn"
                                                id="HCarCardIDPic-BT-ChooseFile"
                                                lay-filter="HCarCardIDPic-BT-ChooseFile" style="width:6rem;">
                                                é€‰æ‹©æ–‡ä»¶
                                            </button>
                                            <button type="button" lay-submit="" class="layui-btn"
                                                id="HCarCardIDPic_BT_UploadFile"
                                                lay-filter="HCarCardIDPic_BT_UploadFile" style="width:6rem;">
                                                ä¸Šä¼ æ–‡ä»¶
                                            </button>
                                        </div>
                                        <div class="layui-inline layui-col-xs4">
                                            <label class="layui-form-label">车辆年检日期</label>
@@ -131,7 +141,7 @@
                                            <label class="layui-form-label">车辆照片</label>
                                            <div class="layui-input-inline">
                                                <input type="text" class="layui-input" id="HCarPric" name="HCarPric"
                                                    readonly>
                                                    style="color: blue;cursor: default;" readonly>
                                            </div>
                                            <button type="button" lay-submit="" class="layui-btn"
                                                id="HCarPric-BT-ChooseFile" lay-filter="HCarPric-BT-ChooseFile"
@@ -139,7 +149,7 @@
                                                é€‰æ‹©æ–‡ä»¶
                                            </button>
                                            <button type="button" lay-submit="" class="layui-btn"
                                                id="HCarPric-BT-UploadFile" lay-filter="HCarPric-BT-UploadFile"
                                                id="HCarPric_BT_UploadFile" lay-filter="HCarPric_BT_UploadFile"
                                                style="width:6rem;">
                                                ä¸Šä¼ æ–‡ä»¶
                                            </button>
@@ -487,6 +497,117 @@
                set_CheckBill(data);
            });

            // è½¦è¾†è¡Œé©¶è¯ç…§ç‰‡ä¸Šä¼ 
            form.on('submit(HCarCardIDPic_BT_UploadFile)', function (data) {
                // æ–‡ä»¶ä¸Šä¼ å‰åˆ¤æ–­æ˜¯å¦å¡«å†™è½¦ç‰Œå·ï¼Œä¸å¡«å†™æ— æ³•ä¸Šä¼ æ–‡ä»¶
                if (!$("#HNumber").val()) {
                    layer.alert("还未填写车牌号，无法上传图片!", { icon: 5 });
                    return false
                }
                if (!(uploadFiles.HCarCardIDPic)) {
                    layer.alert("车辆行驶证文件为空，无法上传!", { icon: 5 });
                    return false
                }

                var ajaxLoad = layer.load();

                var formData = new FormData();
                formData.append("file", uploadFiles.HCarCardIDPic, uploadFiles.HCarCardIDPic.name);
                formData.append("HNumber", $("#HNumber").val());
                formData.append("HPrefix", "/HCarCardIDPic");
                formData.append("HUserName", sessionStorage['HUserName']);

                $.ajax({
                    url: GetWEBURL() + "/Gy_Car/Gy_Car_UploadFile",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function (data) {
                        if (data.count == 1) { // è¯´æ˜ŽéªŒè¯æˆåŠŸäº†ï¼Œ
                            layer.msg(data.Message, { icon: 1 });
                        }
                        else {
                            layer.alert(data.Message, { icon: 5 });
                        }
                        layer.closeAll("loading");
                    },
                    error: function (err) {
                        layer.alert("错误:" + err, { icon: 5 });
                        console.log("Reason" + sMainStr);
                    },
                    compelete: function () {
                        layer.close(ajaxLoad)
                    }
                },
                )

            })

            // è½¦è¾†ç…§ç‰‡ä¸Šä¼ 
            form.on('submit(HCarPric_BT_UploadFile)', function (data) {
                // æ–‡ä»¶ä¸Šä¼ å‰åˆ¤æ–­æ˜¯å¦å¡«å†™è½¦ç‰Œå·ï¼Œä¸å¡«å†™æ— æ³•ä¸Šä¼ æ–‡ä»¶
                if (!$("#HNumber").val()) {
                    layer.alert("还未填写车牌号，无法上传图片!", { icon: 5 });
                    return false
                }
                if (!(uploadFiles.HCarPric)) {
                    layer.alert("车牌照片文件为空，无法上传!", { icon: 5 });
                    return false
                }

                var formData = new FormData();
                formData.append("file", uploadFiles.HCarPric, uploadFiles.HCarPric.name);
                formData.append("HNumber", $("#HNumber").val());
                formData.append("HPrefix", "/HCarPric");
                formData.append("HUserName", sessionStorage['HUserName']);

                $.ajax({
                    url: GetWEBURL() + "/Gy_Car/Gy_Car_UploadFile",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function (data) {
                        if (data.count == 1) { // è¯´æ˜ŽéªŒè¯æˆåŠŸäº†ï¼Œ
                            layer.msg(data.Message, { icon: 1 });
                        }
                        else {
                            layer.alert(data.Message, { icon: 5 });
                        }
                        layer.closeAll("loading");
                    },
                    error: function (err) {
                        layer.alert("错误:" + err, { icon: 5 });
                        console.log("Reason" + sMainStr);
                    },
                    compelete: function () {
                        layer.close(ajaxLoad)
                    }
                },
                )
            })


            //#region å±•ç¤ºå›¾ç‰‡é¢„览 é€šè¿‡layui自定义事件
            layui.onevent('showImageReview', 'click(showImageReview)', function (data) {
                layer.photos({
                    photos: {
                        "title": data.name,
                        "start": 0,
                        "data": [
                            {
                                "alt": data.name,
                                "pid": 1,
                                "src": data.src,
                            },
                        ]
                    }
                });
            });
            //#endregion 

            //#endregion

@@ -546,7 +667,7 @@
                    url: '', // ä¸Šä¼ æŽ¥å£
                    auto: false,
                    // multiple: true,
                    bindAction: '#HCarPric-BT-UploadFile',
                    // bindAction: '#HCarPric-BT-UploadFile',
                    autoPreview: false,
                    choose: function (obj) {
                        // é€‰æ‹©æ–‡ä»¶åŽï¼Œå°†æ–‡ä»¶è§£æžä¸ºbase64图片格式，通过超链接文本预览图片
@@ -554,7 +675,69 @@
                            console.log(index); // å¾—到文件索引
                            console.log(file); // å¾—到文件对象
                            console.log(result); // å¾—到文件base64编码，比如图片

                            // å°†æ–‡ä»¶ä¿å­˜åˆ°æœ¬åœ°ç¼“存，等待上传
                            uploadFiles.HCarPric = file
                            // base64格式图片作为预览项输出到输入框中
                            $("#HCarPric").val(file.name)
                            $("#HCarPric").css("cursor", "pointer")
                            $("#HCarPric").closest("div").click(function () {
                                console.log("触发了点击事件")
                                layui.event('showImageReview', 'click(showImageReview)', {
                                    name: file.name,
                                    src: result,
                                });
                        })

                        })
                    },
                    before: function (obj) {
                        // æ–‡ä»¶ä¸Šä¼ å‰åˆ¤æ–­æ˜¯å¦å¡«å†™è½¦ç‰Œå·ï¼Œä¸å¡«å†™æ— æ³•ä¸Šä¼ æ–‡ä»¶
                        if (!$("#HNumber").val()) {
                            layer.alert("还未填写车牌号，无法上传图片!", { icon: 5 });
                            return false
                        }
                    },
                    done: function (res) {
                        layer.msg('上传成功');
                        console.log(res)
                    }
                });
                upload.render({
                    elem: '#HCarCardIDPic-BT-ChooseFile',
                    url: '', // ä¸Šä¼ æŽ¥å£
                    auto: false,
                    // multiple: true,
                    // bindAction: '#HCarCardIDPic_BT_UploadFile',
                    autoPreview: false,
                    choose: function (obj) {
                        // é€‰æ‹©æ–‡ä»¶åŽï¼Œå°†æ–‡ä»¶è§£æžä¸ºbase64图片格式，通过超链接文本预览图片
                        obj.preview(function (index, file, result) {
                            console.log(index); // å¾—到文件索引
                            console.log(file); // å¾—到文件对象
                            console.log(result); // å¾—到文件base64编码，比如图片

                            // å°†æ–‡ä»¶ä¿å­˜åˆ°æœ¬åœ°ç¼“存，等待上传
                            uploadFiles.HCarCardIDPic = file
                            // base64格式图片作为预览项输出到输入框中
                            $("#HCarCardIDPic").val(file.name)
                            $("#HCarCardIDPic").css("cursor", "pointer")
                            $("#HCarCardIDPic").closest("div").click(function () {
                                console.log("触发了点击事件")
                                layui.event('showImageReview', 'click(showImageReview)', {
                                    name: file.name,
                                    src: result,
                                });
                            })

                        })
                    },
                    before: function (obj) {
                        // æ–‡ä»¶ä¸Šä¼ å‰åˆ¤æ–­æ˜¯å¦å¡«å†™è½¦ç‰Œå·ï¼Œä¸å¡«å†™æ— æ³•ä¸Šä¼ æ–‡ä»¶
                        if (!$("#HNumber").val()) {
                            layer.alert("还未填写车牌号，无法上传图片!", { icon: 5 });
                            return false
                        }
                    },
                    done: function (res) {
                        layer.msg('上传成功');
@@ -597,7 +780,7 @@
                                "HCarTypeID": data.车型,
                                "HCarTypeName": data.车型名称 || "",
                                "HCarPric": data.车辆照片,
                                "HCarCardIDPic": data.车辆行驶照片,
                                "HCarCardIDPic": data.车辆行驶证照片,
                                "HCompID": data.HCompID,
                                "HCompName": data.所属公司,
                                "HModel": data.车辆型号,
@@ -614,6 +797,32 @@
                                "HModifyEmp": data.修改人,
                                "HModifyTime": data.修改时间 ? util.toDateString(data.修改时间, 'yyyy-MM-dd') : ""
                            });
                            
                            // èŽ·å–服务器基地址
                            var apiIndex = GetWEBURL().indexOf("/API/"); 
                            var filePath = GetWEBURL().slice(0, apiIndex) + "/"
                            if (data['车辆照片']) {
                                $("#HCarPric").css("cursor", "pointer")
                                $("#HCarPric").closest("div").click(function () {
                                    console.log("触发了点击事件")
                                    layui.event('showImageReview', 'click(showImageReview)', {
                                        name: data.车辆照片,
                                        src: filePath + 'Files/Gy_Car/' + data["车牌号"] + "/HCarPric/" + data['车辆照片'],
                                    });
                                })
                            }

                            if (data['车辆行驶证照片']) {
                                $("#HCarCardIDPic").css("cursor", "pointer")
                                $("#HCarCardIDPic").closest("div").click(function () {
                                    console.log("触发了点击事件")
                                    layui.event('showImageReview', 'click(showImageReview)', {
                                        name: data['车辆行驶证照片'],
                                        src: filePath + 'Files/Gy_Car/' + data["车牌号"] + "/HCarCardIDPic/" + data['车辆行驶证照片'],
                                    });
                                })
                            }

                            layer.close(ajaxLoad);
                        } else {
                            layer.close(ajaxLoad);
@@ -655,6 +864,8 @@
                })
            }



            //#region ä¿å­˜æ–¹æ³•
            function set_SaveBill(data) {
                if ($("#HNumber").val() == "") {