关于layui以及JS实现点击button按钮，选择本地目录下的文件：

2023-11-24 16:04:16

关于layui以及JS点击button按钮，实现选择本地目录下的文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>

    <link rel="stylesheet" th:href="@{layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{layui/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{layui/css/personal.css}">

</head>
<body>

<div class="layui-form-item">
            <blockquote class="layui-elem-quote layui-text">
            </blockquote>
    <div class="layui-card-header" ><p align="center">作业提交（doc或docx文件）</p></div>

<form name="myupload" id="myupload" class="layui-form" action="onfile" method="post" enctype='multipart/form-data'
          style="margin-left: auto;margin-right: auto;text-align: center">

        <!--3学科名称-->

    <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">科目类别：</label>
                <div class="layui-input-block">
                    <select name="lessonid"  id="lesson" lay-filter="lesson">
                        <option th:each="lesson:${list}" th:value="${lesson.id}" th:text="${lesson.coursename}"></option>
                    </select>
                </div>
            </div>
    </div>
     <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">实验名称：</label>
            <div class="layui-input-block">
                <!--<select name="lessonname" id="lessonname">-->
                    <!--<option value="11" >te1</option>-->

                <!--</select>-->
                <select name="jobid"  id="lessonname" >
                    <option th:each="lesson:${list}" th:value="${lesson.id}" th:text="${lesson.id}"></option>
                    <option value="bigsai" >bigsai</option>
                </select>
            </div>
        </div>
    </div>
        <div class="layui-upload">
            <label id="lb"></label><br><!-- 展示文字名称-->
            <input type="button" value="选取文件" class="layui-btn layui-btn-normal" onclick="getFile()">
            <input style="display: none" type="file"  name="file" id="getF" onchange="clickF()">
            <!--<button type="submit" class="layui-btn" id="test9" οnclick="alert('正在上传，请稍后')">开始上传</button>-->
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </form>
            <div class="layui-form-mid layui-word-aux">此处演示</div>

        </div>


<script type="text/javascript" th:src="@{layui/layui.js}"></script>
<script type="text/javascript" th:src="@{layui/jquery-2.2.1.min.js}"></script>

JS部分：

<script>
//重新渲染
    function renderForm(){
        layui.use('form', function(){
            var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
            form.render();
        });
    }
    function getFile(){
        $("#getF").click();
    }
    var filename="";
    function clickF() {
        filename=$("#getF").val();
        var filenames=filename.split("\\");
        filename=filenames[filenames.length-1];
        $("#lb").text(filename);

    }
    function filldate(json) {
         $("#lessonname").empty();
        for (var i=0;i<json.length;i++)
        {
            $("#lessonname").append(" <option value=\""+json[i].id+"\">"+json[i].title+"</option>");
            console.log(json[i].title)
        }
        renderForm();
    }
    function getjobbyid()
    {
       // $("#lessonname").empty();
        var id=$("#lesson").val();
        $.ajax({
            url: "getjobbyteachclassid",
            type: "GET",
            data: {
             id:id,
            },
            traditional: true,//这里设置为true
            success: function(data) {
                //do sth...
                filldate(data)
            }
        });
    }
    getjobbyid();
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field.file+"正在上传"));
            var myform=document.getElementById("myupload");
            var formdate=new FormData(myform);

            $.ajax({
                url: "onfile",
                type: "POST",
                data: formdate,
                contentType: false,       //一定要写
                processData: false,       //一定要写
                traditional: true,//这里设置为true
                success: function(data) {
                   layer.msg(JSON.stringify(data));
                    console.log(data);
                }
            });
            return false;
            //执行实例
            // $.post("onfile",data.field,function(res){
            //     if(res.status){
            //         layer.msg(res.info, {time: 2000});
            //         // var url = "{:U('student/student_lists')}"; //
            //         // setTimeout(window.location.href=url,2000);
            //     }else{
            //         layer.msg(res.info, {time: 2000});
            //     }
            // },'json');
        });
        //日期

        form.on('select(lesson)', function(data){
           getjobbyid();
        });
        //监听提交
        form.on('submit(demo1)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });


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

PS: input框赋值

通过以下js代码可以实现对input文本框进行赋值

		<input id="name1" name="teacherName" type="text" />
		
		$('#name1').val('值');
        document.getElementById('name1').value='值';
        document.getElementById('name1').html('值');
        document.getElementById('name1').attr('值');
        document.getElementById('name1').innerText = '值';
        
easyui的input框赋值
$('#name').textbox('setValue','值');
取值
var val = $("#name").textbox('getValue')；

转载出处点击链接：https://github.com/javasmall/workupload

码农公寓

相关文章