手机制作页面经验之——input框的使用

最新推荐文章于 2023-07-17 17:51:03 发布

w_qianqian

最新推荐文章于 2023-07-17 17:51:03 发布

阅读量770

点赞数

分类专栏：前端 html+css

本文链接：https://blog.csdn.net/w_mengying/article/details/106457528

版权

前端 html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天是克服拖延症的第五天，恰好是个周末，讲真自从工作之后，每过一个周末都会萌生辞职换工作的念头，不过还好吧，这次的情绪反扑并没有之前严重，希望自己能够在克服拖延症的同时，在这个岗位上坚持下去~
今天分享的内容如下，难度依次递增：

使用input框唤起电脑手机设备的文件夹

使用input框拨打电话

使用input框获取选中文件的文件路径以及文件名，并将它们在网页中显示出来

使用input 框唤起手机设备的相机、相册

使用input 框唤起手机设备的录像功能

使用input 框唤起手机设备的录音功能

使用input框将获取到的图片显示在页面中

下面就让我们一起来看看吧~

使用input框唤起电脑手机设备的文件夹

这个难度是最小的，只需要改变input框的一个属性即可唤起，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电脑端唤起文件夹</title>
</head>
<body>
    <input type="file"> //直接将input的type属性改为file即可，同时会自动在页面上面显示出文件名
</body>
</html>

上传文件之前的显示结果
上传文件之前的显示方式
选择文件之后的显示效果，注意，这里默认可以在input按钮旁边显示文件名（加后缀）
在这里插入图片描述

使用input框拨打电话

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //手机端页面制作必加meta属性
<title>拨号</title>
<style type="text/css">
  body{
      text-align: center;
      background-color: #f8e6ce;
  }
</style>
</head>
<body>
  <p>手机号码：112233445566778899</p>
  <a href="tel:112233445566778899">点击拨号</a>  //只需要给a标签的herf属性设置为tel:手机号码，即可唤起手机拨号功能
</body>
</html>

使用input框获取选中文件的文件路径以及文件名（带文件后缀），并将它们在网页的特定位置显示出来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文件上传并显示文件名</title>
</head>
<body>
	<input type="file" id="btn_file" onchange="show_files_name(this)" style="display:none;">
	<input type="text" id="shangchaun">
	<div onclick="btn_file.click()">选择</div>
</body>
	<script src="js/jquery.min.js"></script>
	<script>
		function show_files_name(ipt){
			var _files = ipt.files;
			for (var i = 0; i < _files.length; i++) {
				$("#shangchaun").val(_files[i].name); //显示文件名，若要显示文件路径，只需要将_files[i].name 改为_files[i]即可
		  	}
		    //在这之前要把文件和文件信息获取出来，以备再次获取文件信息
		    ipt.value="";
		}
	</script>
</html>

显示效果如下：
未选择文件的效果
在这里插入图片描述
选择文件之后产生的效果（在这里显示的是文件名）

下面是上传文件显示文件路径的代码~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传并显示文件路径</title>
</head>
<body>
    <input type="file" id="btn_file" onchange="show_files_name(this)" style="display:none;">
    <input type="text" id="shangchaun" style="width: 200px;">
    <div onclick="btn_file.click()">选择</div>
</body>
    <script src="js/jquery.min.js"></script>
    <script>
        function show_files_name(ipt){
            var _file = ipt.value;
            $("#shangchaun").val(_file);  //将会在此input框中显示出文件在本设备的绝对路径
        }
    </script>
</html>

选择文件之后产生的效果（在这里显示的是文件在本设备的绝对路径）
在这里插入图片描述

使用input 框唤起手机设备的相机、相册

单纯唤起手机相机~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拍照</title>
<style type="text/css">
    body{
        text-align: center;
        background-color: #f8e6ce;
    }
</style>
<script type="text/javascript">
    function change(){  
      var imagefile= document.getElementById("image").files[0]; 
      var reads = new FileReader();
      reads.readAsDataURL(imagefile);
      reads.onload = function(e) {
        document.getElementById('imageId').src = this.result;
      };
    } 
</script>
</head>

<body>
    <img style="width:100%;height:200px;border:2px dashed black;" id="imageId">
    <input type="file" id='image' style="display:none" accept="image/*" capture='camera' onchange="change()">
    <p><button onclick="image.click();">点击拍照</button></p>
</body>

</html>

同时唤起手机相机以及相册代码~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拨号</title>
<style type="text/css">
  body{
    text-align: center;
    background-color: #f8e6ce;
  }
</style>
</head>
<body>
	<div>
		<input type="file" name="image" accept="image/*" />
		 <div onclick="showActionSheet()">
			<div ></div>
		</div>
	</div>
</body>
<script>
	//点击事件，弹出选择摄像头和相册的选项
	function showActionSheet() {  
	    var bts = [{  
	        title: "拍照"  
	    }, {  
	        title: "从相册选择"  
	    }];  
	    plus.nativeUI.actionSheet({  
	            cancel: "取消",  
	            buttons: bts  
	        },  
	        function(e) {  
	            if (e.index == 1) {  
	                getImage();  
	            } else if (e.index == 2) {  
	                galleryImgs();  
	            }  
	        }  
	    );  
	}
</script>
</html>

使用input 框唤起手机设备的录像功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄像</title>
<style type="text/css">
  body{
      text-align: center;
      background-color: #f8e6ce;
  }
</style>
<script type="text/javascript">

  function change(){
    var videofile = document.getElementById('getvideo').files[0]; 
    var url = URL.createObjectURL(videofile); 
    var videos =document.getElementById("myVideo")
    videos.src = url; 
  }

</script>

</head>s

<body>
  <video id="myVideo" controls width="350" height="200">
    <source type="video/mp4" />
    <source type="video/webm" />
    <source type="video/ogg" />
  </video>
  <input type="file" id='getvideo' accept="video/*" capture="camcorder" style="display:none" onchange="change()">
  <p><button onclick="getvideo.click();">点击摄像</button></p>
</body>

</html>

使用input 框唤起手机设备的录音功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>录音</title>
<style type="text/css">
  body{
      text-align: center;
      background-color: #f8e6ce;
  }
</style>
<script type="text/javascript">

  function change(){
    var audiofile = document.getElementById('getaudio').files[0]; 
    var url = URL.createObjectURL(audiofile); 
    var audio =document.getElementById("myAudio")
    audio.src = url; 
  }

</script>
</head>

<body>
  <audio id="myAudio" controls>
    <source type="audio/ogg">
    <source type="audio/mpeg">
    <source type="audio/wav">
  </audio>
  <input type="file" accept="audio/*" id="getaudio" capture="microphone" style="display:none" onchange="change()">
  <p><button onclick="getaudio.click();">点击录音</button></p>
</body>

</html>

使用input框将获取到的图片显示在文件中

这个是这篇文章中难度最大的 ~ ~，作为一个初学者我也不是很明白里面的门道，技术水平有限暂时先这样，大家先凑活着看把。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <title>测试</title>
    <link rel="stylesheet" href="css/layer.css">
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/jquery-weui.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/layer.js"></script>
    <link rel="stylesheet" href="css/xw_style.css">
    <script src="js/all.js"></script>
</head>
<body style="background-color: pink;">
    <div class="content" style="width: 80%; margin: 50px auto;">
        <div class="flex flex-align-center login_form_item">
            <input type="file" name="" id="gt" onchange="up_gt(this)" />
            <label for="gt" class="flex flex-align-center form_gt_img">
                <p class="flex-1 form_gt_img_p">点击上传杆塔照片</p>
                <div class="form_gt_img_img">
                    <img src="images/newicon.png" />
                </div>
            </label>
        </div>
        <div class="flex flex-v " id="gtphoto">
        </div>
    </div>
    
</body>
<script>
    //上传图片部分
    var imgs=[];
    function up_gt(ipt){
        if(!parseInt(ipt.getAttribute("dis"))||isNaN(parseInt(ipt.getAttribute("dis")))){
            var flis=ipt.files;
            var reader = new FileReader();
            //异步方式，不会影响主线程
            reader.readAsDataURL(flis[0]);

            reader.onload = function(e) {
                imgs.push(this.result);
                reader=undefined;
                ipt.value="";
                show_imgs();
            };
        }else{
            layer.open({
                content: '每次只能上传2张图片',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }
    }
    function show_imgs(){
        var gtphoto=document.getElementById('gtphoto');
        var imgchar="";
        for (var i = 0; i < imgs.length; i++) {
            imgchar+='<div class="gtphoto_img"><img onclick="zoom(this)" idx="'+i+'" src="'+imgs[i]+'" /><div class="icon1_box" onclick="delete_img(this)" idx="'+i+'"><i class="icon_1 icon_1_close"></i></div></div>';
        }
        gtphoto.innerHTML=imgchar;
        if(imgs.length==2){
            document.getElementById('gt').setAttribute("dis",1);
        }else{
            document.getElementById('gt').removeAttribute("dis",0);
        }
        if(imgs.length>0){
            $(gtphoto).fadeIn();
        }else{
            $(gtphoto).hide();
        }
    }
    function delete_img(dom){
        event.stopPropagation();
        var idx=parseInt(dom.getAttribute("idx"));
        imgs.splice(idx,1);
        show_imgs();
    }
    //点击查看大图部分
    var zoomSwp = "";
    function zoom(dom){
        var idx=parseInt(dom.getAttribute("idx"));
        var swpchar='<div class="swiper-container" id="zoomSwpr"><div class="swiper-wrapper">';
        for (var i = 0; i < imgs.length; i++) {
            // swpchar+='<div class="swiper-slide" onclick="zoom_close()"><img onclick="event.stopPropagation();" src="'+imgs[i]+'" /></div>';
            swpchar+='<div class="swiper-slide" onclick="zoom_close()"><img src="'+imgs[i]+'" /></div>';
        }
        $(document.body).append($(swpchar+'</div></div>'));
        zoomSwp=new Swiper('#zoomSwpr',{
            // zoom: true,
            initialSlide: idx
        });
    }
    function zoom_close(){
        zoomSwp.destroy(true);
        zoomSwp="";
        $("#zoomSwpr").remove();
    }
</script>
</html>

这段代码先放在这里把，由于我也是直接拿来用的，并不懂原理，今天也分享了不少东西了，希望没有浪费大家时间，本人确是一只菜鸟小白，还请大家多多指教~

w_qianqian

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
手机制作页面经验之——input框的使用

今天是克服拖延症的第五天，恰好是个周末，讲真自从工作之后，每过一个周末都会萌生辞职换工作的念头，不过还好吧，这次的情绪反扑并没有之前严重，希望自己能够在克服拖延症的同时，在这个岗位上坚持下去~今天分享的内容如下，难度依次递增：使用input框唤起电脑手机设备的文件夹使用input框拨打电话使用input框获取选中文件的文件路径以及文件名，并将它们在网页中显示出来使用input 框唤起手机设备的相机、相册使用input 框唤起手机设备的录像功能使用input 框唤起手机设备的录音功能使用in
复制链接

扫一扫

专栏目录