常用HTML代码文件

最新推荐文章于 2024-06-10 17:18:33 发布

两点王爷

最新推荐文章于 2024-06-10 17:18:33 发布

阅读量385

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_43544074/article/details/126033519

版权

1、html网页将图片转成bsae64码

具体HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type"
			  content="text/html; charset=utf-8" />
		<title>图片转代码</title>
		<style>
		</style>
		<script>
window.onload = function() {
	var input = document.getElementById("demo_input");
	var result = document.getElementById("result");
	var img_area = document.getElementById("img_area");
	if (typeof(FileReader) === 'undefined') {
		result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
		input.setAttribute('disabled', 'disabled');
	} else {
		input.addEventListener('change', readFile, false);
	}
}

function readFile() {
	var file = this.files[0];
	//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 
	if (!/image\/\w+/.test(file.type)) {
		alert("请确保文件为图像类型");
		return false;
	}
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(e) {
		result.innerHTML = '<img src="' + this.result + '" alt=""/>';
		img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="' + this.result + '" alt=""/>';
	}
}
</script>
	</head>
	<body>
		<input type="file"
			   value="sdgsdg"
			   id="demo_input" />
		<textarea id="result"
				  rows=30
				  cols=300></textarea>
		<p id="img_area"></p>
	</body>
</html>

2、跨域测试文件

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>测试ajax和跨域访问</title>
        <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://192.168.65.8/data/",//你需要请求的地址
            success: function (data) {
                alert("successful! 跨域成功！");
            },
            error: function () {
                alert("fail! 跨域失败!");
            }
        });
    });
</script>
    <body>
        <h1>测试跨域访问</h1>
    </body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="js判断URL是否可访问" />
        <title>js判断URL是否可访问</title>
    </head>
    <body>
        <div>检验的url地址：</div>
        <input type="text" style="width:600px;height:30px;font-size:14px;"
            id="urlText" value="http://192.168.65.8/data/" />
        <input type="button" value="判断是否可访问" onclick="getURL()" />
        <br />
        <div id="msg1"></div>
        <div id="msg"></div>
        <br />
        -----------前端处理跨域后访问(使用jsonp)-------------
        <br />
        <div id="msg22"></div>
        <div id="msg2"></div>

        <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
        function getURL() {
        $("#msg").html("");
        var url = $("#urlText").val();//请求的url
        var dateTime = disptime();
        var time2 = dateTime.DateTime; 
        $("#msg1").html("发送时间：" + time2); 
        $.ajax({
            type: 'get',
            url: url,
            cache: false,
            dataType: "json",
            processData: false,
            timeout:10000, //超时时间，毫秒
            complete: function (data) {
            var dateTime2 = disptime();
            var time22 = dateTime2.DateTime;
            var htmlTxt =[];
            if (data.status==200) {
                htmlTxt.push("成功<br/>");
            } else {
                htmlTxt.push("失败<br/>");
            }        
            htmlTxt.push("readyState=" + data.readyState + "<br/>status=" + data.status + "<br/>statusText=" + data.statusText + "<br/>响应时间：" + time22);
            var htmlString = htmlTxt.join('');
            $("#msg").html(htmlString);
            }       
        });
        getURL1();
        }

        function getURL1() {
        $("#msg2").html("");
        var url = $("#urlText").val();//请求的url
        var dateTime = disptime();
        var time2 = dateTime.DateTime; 
        $("#msg22").html("发送时间：" + time2); 
        $.ajax({
            type: 'get',
            url: url,
            cache: false,
            dataType: "jsonp", //跨域采用jsonp方式 
            processData: false,
            timeout:10000, //超时时间，毫秒
            complete: function (data) {
            var dateTime2 = disptime();
            var time22 = dateTime2.DateTime;
            var htmlTxt =[];
            if (data.status==200) {
                htmlTxt.push("成功<br/>");
            } else {
                htmlTxt.push("失败<br/>");
            }        
            htmlTxt.push("readyState=" + data.readyState + "<br/>status=" + data.status + "<br/>statusText=" + data.statusText + "<br/>响应时间：" + time22);
            var htmlString = htmlTxt.join('');
            $("#msg2").html(htmlString);
            }       
        });
        }

        function disptime() {
        var date = new Date();
        var yyyy = date.getFullYear();//四位年份
        var month = date.getMonth() + 1;//月份 0-11
        var day = date.getDate();//日
        var HH = date.getHours();//时
        var minute = date.getMinutes();//分钟
        var second = date.getSeconds();//秒
        var milliseconds=date.getMilliseconds();//毫秒
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        if (HH < 10) {
            HH = "0" + HH;
        }
        if (minute < 10) {
            minute = "0" + minute;
        }
        if (second < 10) {
            second = "0" + second;
        }
        var time = yyyy + "-" + month + "-" + day + " " + HH + ":" + minute + ":" + second + " " + milliseconds;
        var timeTxt = yyyy + month + day + HH + minute + second;
        var time = {
            DateTime: time,
            TimeTxt: timeTxt
        }
        return time;
        }
  </script>
    </body>
</html>