知识点

  • onchange事件

  • 循环

  • 封装函数

  • ajax

  • php

Javascript代码

	//找到元素

	var file=document.getElementById("file");

	//绑定事件

	file.onchange =function (){

		//获取图片名称

		let files=this.files;

		//循环来上传多个图片

		for(var i=0;i<files.length;i++){

		//调用ajax

			ajax('11.php',files[i],function(data){

				console.log(data);

				console.log("成功....");

			})

		}

	}

	 //ajax的基本写法

 	function ajax(url,data,fn){

 		const xhr =new XMLHttpRequest();

 		xhr.onreadystatechange =function(){

 			if(xhr.readyState ===4 && xhr.status ===200){

 				fn(xhr.responseText);

 			}

 		}

 		const formData=new FormData();

 		formData.append('file',data);

 		xhr.open("post",url,true);

 		xhr.send(formData);

 	}

php代码

<?php

header("Constent-type:test/html;Charset=utf-8");

//从前端后去数据

$fileinfo =$_FILES['file'];

//图片存储位置

$url ="./img/";

$url =$url.basename($_FILES['file']['name']);

move_uploaded_file($fileinfo['tmp_name'], $url);

echo "成功";

?>

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>特效</title>

	<style>

		*{

			margin: 0;

			padding: 0;

		}

		#game {

			position: absolute;

			left: 0;

			right: 0;

			top: 0;

			bottom: 0;

			margin: auto;

			box-shadow: -2px -2px 2px #efefef ,5px 5px 5px #b9b9b9;

		}

	</style>

</head>

<body>

	<canvas id="game"></canvas>

</body>

<script>

	//在网页或者图片加载完后执行

	window.onload =function(){

		let arr =[];

		for(let i=0;i<15;i++){

			arr[i] =[]

			for(let j=0;j<15;j++){

				arr[i][j] =1

			}

		}

		let count =true;

		//获取属性

		let gamer =document.querySelector('#game');

		gamer.width =450;

		gamer.height =450;

		let context =gamer.getContext('2d');

		context.strokeStyle='#999999';

		for(let i=0;i<15;i++){

			context.moveTo(15,15 +i *30);

			context.lineTo(435, 15 + i *30);

			context.stroke();

		}

		for(let i=0;i<15;i++){

			context.moveTo(15+i *30 , 15);

			context.lineTo(15+i*30,435);

			context.stroke();

		}

//表格已完成

	let black =function(x,y){

		let gradient =context.createRaadialGradient(x,y,3,x,y,13);

		gradient.addColorStop(0,'#999');

		gradient.addColorStop(1,'#000');

		context.fillStyle = gradient

        context.beginPath()

        context.arc(x, y, 13, 0, 2 * Math.PI)

        context.fill()

        context.closePath()

	}

	let white = (x, y) => {

        let gradient = context.createRadialGradient(x, y, 3, x, y, 13)

        gradient.addColorStop(0, '#ffffff')

        gradient.addColorStop(1, '#888888')

        context.fillStyle = gradient

        context.beginPath()

        context.arc(x, y, 13, 0, 2 * Math.PI)

        context.fill()

        context.closePath()

    }

    gamer.onclick = (e) => {

        let x = e.offsetX

        let y = e.offsetY

        x = Math.floor(x / 30)

        y = Math.floor(y / 30)

        if(arr[x][y] != 0) {

            if(count == true) {

                black(x*30+15, y*30+15)

                arr[x][y] = 0

                count = !count

            }else {

                white(x*30+15, y*30+15)

                arr[x][y] = 0

                count = !count

            }

        }

    }

}

</script>

</html>

js实现图片上传方法的更多相关文章

  1. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  2. 富文本vue-quill-editor修改图片上传方法

    富文本vue-quill-editor修改图片上传方法 HTML 代码 HTML codes <!-- 上传的组件 --> <upload style="display:n ...

  3. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  4. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  5. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  6. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  7. js判断图片上传时的文件大小，和宽高尺寸

    今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...

  8. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  9. PHP+js实现图片上传，编辑

    文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字: 然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面: 最后表单提交时,把文件信息 ...

随机推荐

  1. 深入理解Java的switch...case...语句

    switch...case...中条件表达式的演进 最早时,只支持int.char.byte.short这样的整型的基本类型或对应的包装类型Integer.Character.Byte.Short常量 ...

  2. linux学习书籍推荐《鸟哥的Linux私房菜》下载

    下载地址:点我 <鸟哥的Linux私房菜:基础学习篇>是具有知名度的Linux入门书<鸟哥的Linux私房菜基础学习篇>的最新版,全面而详细地介绍了Linux操作系统.< ...

  3. MySQL 8.0 information_schema系统库的改进

    目录 information_schema有何用? mysql8.0 之前的查询方式 mysql8.0 开始的查询方式 测试5.7和8.0不同版本访问I_S库的性能 结论 information_sc ...

  4. Spring源码阅读-ApplicationContext体系结构分析

    目录 继承层次图概览 ConfigurableApplicationContext分析 AbstractApplicationContext GenericApplicationContext Gen ...

  5. 基于SpringCloud的微服务架构实战案例项目，以一个简单的购物流程为示例

    QuickStart 基于SpringCloud体系实现,简单购物流程实现,满足基本功能:注册.登录.商品列表展示.商品详情展示.订单创建.详情查看.订单支付.库存更新等等. 每个业务服务采用独立的M ...

  6. C语言指针专题——为何要学习指针

    欢迎转发本文! 之前的文章与各位谈论了指针是什么,以及指针为何这那么难学.不少知友留言说看了我的文章对指针了解了不少,这给我继续创作提供了莫大的动力啊.指针其实就是一个纸老虎,你看着可怕,等你了解其本 ...

  7. python+selenium 批量执行时出现随机报错问题【已解决】

    出现场景:用discover方法批量执行py文件,出现随机性的报错(有时a.py报错,有时b.py报错...),共同特点:均是打开新窗口后,切换最新窗口,但定位不到新窗口的元素,超时报错.由于个人项目 ...

  8. 列表 元组 range

    2019 年 7 月 9 日 列表---list------容器 列表:存储数据,支持多个数据类型,比如 :字符串 数字 布尔值 列表 集合 元组 ​ 特点 : 有序 可变 支持索引 (定义一个列表不 ...

  9. RabbitMQ（一）：RabbitMQ快速入门

    RabbitMQ是目前非常热门的一款消息中间件,不管是互联网大厂还是中小企业都在大量使用.作为一名合格的开发者,有必要对RabbitMQ有所了解,本文是RabbitMQ快速入门文章. RabbitMQ ...

  10. Netty-Pipeline深度解析

    首先我们知道,在NIO网络编程模型中,IO操作直接和channel相关,比如客户端的请求连接,或者向服务端发送数据, 服务端都要从客户端的channel获取这个数据 那么channelPipeline ...