layui 远程上传图片或文件

浪淘沙10个月前前端72

image.png

@page
@model xxtsoft.Web.Entry.Pages.pic1Model
@{
    ViewData["Title"] = "答题卡上传";
}
<br />
<style>
    .layui-upload-img, .layui-upload-img1 {
        width: 250px;
        
        margin: 10px;      
      

    }
</style>

<div class="layui-container ">
   
    <div class="layui-card-header layui-bg-green"><b>2025届高三寒假学考评六</b></div>
    <br />
    <blockquote class="layui-elem-quote">
        1、答题卡4个角都要在相机中。<br>2、图片不要压缩,太糊AI批改不了。
    </blockquote>

    <form class="layui-form" action="" id="form1" lay-filter="form1">

        <br />
        <div class="layui-form-item" style="text-align:center;">


            <input type="file" id="FileA" name="FileA" accept="image/*" onchange="previewImage(this,'previewImg')" />
            <br />
            <img id="previewImg" class="layui-upload-img" />


        </div>
        <div class="layui-form-item" style="text-align:center;">


            <input type="file" id="FileB" name="FileB" accept="image/*" onchange="previewImage(this,'previewImg1')" />
            <br />
            <img id="previewImg1" class="layui-upload-img" />


        </div>

        <div class="layui-form-item">

            <button class="layui-btn btn-block layui-bg-blue layui-btn-lg layui-btn-fluid" id="submit1" lay-submit lay-filter="form1-submit">提交</button>

        </div>

    </form>
</div>
<footer>
    <div class="container">
        <a href="km">上一步</a>
    </div>
</footer>
<script>
    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var upload = layui.upload;

        // 提交事件
        form.on('submit(form1-submit)', function (data) {

            var field = data.field; // 获取表单全部字段值
            // 执行提交
            layer.confirm('确定提交吗?', function (index) {
                layer.close(index); // 关闭确认提示框

                $('#submit1').prop('disabled', true);
                $('#submit1').addClass('layui-btn-disabled');
                $('#submit1').text('文件接收中...');

                const fileA = document.getElementById('FileA').files[0];
                const fileB = document.getElementById('FileB').files[0];

                if (!fileA || !fileB) {
                    layer.msg('请先选择两个文件');
                    return;
                }
                // 构造 FormData
                const formData = new FormData();
                formData.append('TestPaperDetailId', 235);
                formData.append('UserId', 30124);
                formData.append('FileA', fileA, fileA.name);
                formData.append('FileB', fileB, fileB.name);

                console.log(formData);

                // 发送请求
                $.ajax({
                    url: 'http://118.178.236.144:5801/api/standAloneApi/saveAnswerCard@2',
                    type: 'POST',
                    data: formData,
                    processData: false, // 防止 jQuery 将数据转换为字符串
                    contentType: false, // 使用 FormData 自带的内容类型
                    headers: {
                        'accept': 'text/plain',
                    },
                    success: function (response) {

                        if (response.statusCode == 200) {
                            layer.msg('上传成功');
                            location.href = '/';
                        }
                        else {
                            console.log(response.errors);
                            var errors = response.errors;
                            alert('上传失败:' + errors);
                            //layer.msg('上传失败:' + errors);
                            location.href = 'pic1';
                        }


                    },
                    error: function (xhr) {
                        //layer.msg('上传失败,请重新上传');
                        alert('上传失败,请重新上传');
                        location.href = 'pic1';


                    }
                });

            });


            return false;
        });

    });
    function previewImage(input, imgid) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = document.getElementById(imgid);
                img.src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>


相关文章

layui table中单元格的行高处理

   , lineStyle: 'height: 55px;' <style>  &nbs...

Element Plus 步骤条el-steps 设置simple时,箭头换成横线

@page @model xxtsoft.Web.Entry.Pages.hr.regModel @{     Layout =&nb...

asp.net core razor layui 分页和url参数绑定一起

@page @model xxtsoft.Web.Entry.Pages.sysadmins.rw.rw_listModel @{     La...

layui form提交时,弹出确认框

layui form提交时,弹出确认框

<div class="container yx-form">     <form c...

layui给form 字段绑定返回值

 $.ajax({      url: "/api/feedback/readByID/" +&n...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。