知识点

  • 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. Linux 安装 lanmp

    Lanmp介绍 lanmp一键安装包是wdlinux官网2010年底开始推出的web应用环境的快速简易安装包. 执行一个脚本,整个环境就安装完成就可使用,快速,方便易用,安全稳定 lanmp一键安装包 ...

  2. C++学习书籍推荐《Effective C++ 第三版》下载

    百度云及其他网盘下载地址:点我 编辑推荐 <Effective C++:改善程序与设计的55个具体做法(第3版)(中文版)(双色)>前两个版本抓住了全世界无数程序员的目光.原因十分明显:S ...

  3. Java基础之增强for循环

    平时大家for循环应该用的不少,特别是增强for循环,简单快捷.但是在增强for中做删除操作,却会抛出java.util.ConcurrentModificationException,一起来看下. ...

  4. Java内部类你真的会吗？

    一.四种内部类 1.1.成员内部类 成员内部类是最普通的内部类,它的定义为位于另一个类的内部,形如下面的形式: public class OuterAndInnerClass { public sta ...

  5. [USACO10FEB]给巧克力Chocolate Giving

    题意简叙: FarmerFarmerFarmer JohnJohnJohn有B头奶牛(1<=B<=25000)(1<=B<=25000)(1<=B<=25000), ...

  6. C#的DateTime得到特定日期

    //指定时间 DateTime dt = new DateTime(2016, 6, 1); //当前时间 DateTime dt = DateTime.Now; //本周周一 DateTime st ...

  7. linux初学者-MariaDB图形管理篇

     linux初学者-MariaDB图形管理篇 MariaDB不仅有文本管理方式,也有借助工具的图形管理方式.其图形管理的工具是"phpmyadmin".这个软件可以在"p ...

  8. module中module.exports与exports的区别(转)

    转https://cnodejs.org/topic/55ccace5b25bd72150842c0a require 用来加载代码,而 exports 和 module.exports 则用来导出代 ...

  9. 第一章jQuery基础

    一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype之后又一个优秀的java ...

  10. 洛谷 P5150 题解

    题面 因为 n=lcm(a,b)n = lcm(a, b)n=lcm(a,b) ,可以得出: a  和 b  的质因数都是 n 的质因数 对于 n  的每个质因数 x ,在 n 中的次数为 y ,那么 ...