2020-08-05 html audio loading + css negative margin and inline-block + JS batch upload file component + the local address of soft skills

2020-08-05 Source of topic: http://www.h-camel.com/index.html

[html] How to preload audio in H5?

H5 adds Audio object. For the implementation of mobile terminal h5, please refer to https://www.cnblogs.com/leinov/p/3896772.html

The simplest: <audio id="myAudio" src="img/RiverFlowsInYou.mp3" autoplay controls loop></audio> //Auto play, display controls, loop play

or: <audio id="myAudio" autoplay controls loop> <source src="img/f.mp3" type="audio/mpeg"> </audio>

let obj = document.getElementById("myAudio");

obj.play(); // play

obj.pause(); // pause

[css] How does the negative value of the margin attribute behave under the inline-block element?

You can refer to: https://blog.csdn.net/FuChenRenShen/article/details/83930511

[js] Use js to write a component for batch uploading files

Without plug-ins, realize batch upload of files and progress display https://www.cnblogs.com/chengpanpan/p/7074794.html

<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" type="text/css" href="./css/NewFile.css">
		
		<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
	
	</head>
	<body>
		<div id="test">
		<input type="file" id="fileMutiply" name="files" multiple="multiple" >
		</div>

		<script>
			/**
			 *
			 */
			var i=0;
			var j=0;
			$(function(){
			
			    $("#fileMutiply").change(function eventStart(){
			        var ss =this.files; //获取当前选择的文件对象
			         for(var m=0;m<ss.length;m++){  //循环添加进度条
			
			                 efileName = ss[m].name ;
			         if (ss[m].size> 1024 * 1024){
			            sfileSize = (Math.round(ss[m].size /(1024 * 1024))).toString() + 'MB';
			            }
			        else{
			            sfileSize = (Math.round(ss[m].size/1024)).toString() + 'KB';
			            }
			
			
			         $("#test").append(
			         "<li  id="+m+"file><div class='progress'><div id="+m+"barj class='progressbar'></div></div><span class='filename'>"+efileName+"</span><span id="+m+"pps class='progressnum'>"+(sfileSize)+"</span></li>");
			
			                 }
			         sendAjax();
			          function sendAjax() {
			                  if(j>=ss.length)   //采用递归的方式循环发送ajax请求
			                {
			                  $("#fileMutiply").val("");
			                       j=0;
			                    return;
			                }
			               var formData = new FormData();
			               formData.append('files', ss[j]);  //将该file对象添加到formData对象中
			                    $.ajax({
			                        url:'fileUpLoad.action',
			                        type:'POST',
			                        cache: false,
			                        data:{},//需要什么参数,自己配置
			                        data: formData,//文件以formData形式传入
			                        processData : false,
			                       //必须false才会自动加上正确的Content-Type
			                       contentType : false ,
			                    /*   beforeSend:beforeSend,//发送请求
			                       complete:complete,//请求完成
			        */            xhr: function(){      //监听用于上传显示进度
			                            var xhr = $.ajaxSettings.xhr();
			                            if(onprogress && xhr.upload) {
			                             xhr.upload.addEventListener("progress" , onprogress, false);
			                             return xhr;
			                            }
			                           } ,
			                        success:function(data){
			
			
			                            $(".filelist").find("#"+j+"file").remove();//移除进度条样式
			                             j++; //递归条件
			                            sendAjax();
			
			                   //     }
			
			                        },
			                        error:function(xhr){
			                          alert("上传出错");
			                        }
			                    });
			
			
			                }
			
			    })
			
			       function onprogress(evt){
			
			          var loaded = evt.loaded;     //已经上传大小情况
			          var tot = evt.total;      //附件总大小
			          var per = Math.floor(100*loaded/tot);  //已经上传的百分比
			         $(".filelist").find("#"+j+"pps").text(per +"%");
			         $(".filelist").find("#"+j+"barj").width(per+"%");
			         };
			
			
			})
		</script>
	</body>
	</html>

[Soft Skills] What is the difference between 127.0.0.1 and 0.0.0.0?

1. Loopback address 127.0.0.1: From 127.0.0.1 to 127.255.255.255, this is the loopback address. localhost is the 127.0.0.1 domain name resolved by the local DNS. Generally, we test whether the local network is normal by ping 127.0.0.1.

2. Look at 0.0.0.0 again: In routing, the corresponding route when a completely matched route is not found in the routing table.

In the address, 0.0.0.0 on the server side means all the IPV4 addresses on the machine. It is not possible to ping 0.0.0.0 directly. In IPV4, it means an invalid target address.

Guess you like

Origin blog.csdn.net/vampire10086/article/details/108357834