input篇

全能大咖9

已于 2022-07-11 10:38:39 修改

阅读量203

点赞数

文章标签： javascript 前端 html

于 2022-06-27 13:09:26 首次发布

本文链接：https://blog.csdn.net/m0_57048774/article/details/125481871

版权

input点击边框

    <style>
        input{
            outline: none;          /*消除点击时的边框*/
            outline-color: red;    /*更改点击时的边框*/
        }
    </style>
     <input type="text" placeholder="用户名" name="use">
     <input type="password" placeholder="用户名密码" name="password">
     <input type="submit" value="提交">

下拉框

js获取选中下拉框的值

    <select name="zhi" id="dx">
        <option>选择你喜欢的一门语言</option>
        <option value="01">css</option>
        <option value="02">html</option>
        <option value="03">java</option>
        <option value="04">c++</option>
        <option value="05">python</option>
    </select>
    <script>
     	let dx = document.querySelector('#dx');
        dx.onchange = function() {  //选项变换时触发
            let arr = {'01': "java",'02': 'css','03': 'java','04': 'c++','05': 'python'}
            let info = arr[dx.value]
            if(info===undefined) info = '';
            console.log(info);
        }
     </script>

复选框

 <!--有checked js访问 input.checked 为true，没有为false  disabled禁选属性-->
  <input type="checkbox" checked disabled> 
  <input type="checkbox">
  <input type="checkbox">

单选框

<body>
    <div class="dan">
        <!-- <input type="radio" name="gender" value="男" checked disabled> 选中 静选 -->
        <input type="radio" name="gender" value="男"> 
        <input type="radio" name="gender" value="女">
        <input type="radio" name="gender" value="人妖">
        <button onclick="radio()">获取单选值</button>
    </div>
</body>
<script>
    function radio(){
        let input = document.getElementsByName('gender');
        input.forEach(item=>{
            if(item.checked===true){
                console.log(item.value);
            }
        })
    }

</script>

文件上传

  <div style="width: 100px;height: 100px;border: 1px dotted;text-align: center;line-height: 100px;font-size: 20px;position: relative;display: inline-block;"> +
        <input type="file" name="pic" onChange="showPic(this)" style="opacity: 0;position: absolute;background: yellow;width: 100%;height: 100%;left: 0;z-index: 3;" id="file">
        <div style="z-index: 2;position: absolute;top: 0; left: 0px;height: 97px;width: 97px;"><img src="" class="image-file" width="100px" height="100px" style="opacity:0;" ></div>
    </div>
    <button onclick="getFlie()">上传</button>
  

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //将路径写入img元素
    function showPic(obj) {
        var fileUrl = getObjectURL(obj.files[0]);
        if (fileUrl != null) {
            document.querySelector(".image-file").src = fileUrl;      // 图片预览
            document.querySelector(".image-file").style = "opacity:1";
        }
    }
    //获取文件路径
    function getObjectURL(file) {
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL != undefined) url = window.createObjectURL(file);
        else if (window.URL != undefined) url = window.URL.createObjectURL(file);
        else if (window.webkitURL != undefined) url = window.webkitURL.createObjectURL(file);
        return url;
    }
    //文件上传
    function getFlie() {
        let dom = document.getElementById('file');
        console.log(dom);
        let file = dom.files[0]   //files获取上传文件参数
        let form = new FormData()  //上传文件需要new forDate
        form.append('img', file) //img格式
        axios({
            url: 'http://api_devs.wanxikeji.cn/api/savePic',  ///api/savePic上传文件接口
            method: 'post',  //图片上传不能用get
            data: form,  
        })
      }
</script>