知识点

  • 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. .Net高级编程-自定义错误页 web.config中<customErrors>节点配置

    错误页 1.当页面发生错误的时候,ASP.Net会将错误信息展示出来(Sqlconnection的错误就能暴露连接字符串),这样一来不好看,二来泄露网站的内部实现信息,给网站带来安全隐患,因此需要定制 ...

  2. springboot与springcloud的关系

    1 . 问题描述 随着springboot.springcloud的不断迭代升级,开发效率不断提升,越来越多的开发团队加入到spring的大军中,今天用通俗的语言,介绍下什么是springboot,s ...

  3. java学习笔记(基础篇)--java关键字与数据类型

    java关键字与数据类型 Java语言的关键字是程序代码中的特殊字符.包括: . 类和接口的声明--class, extends, implements, interface . 包引入和包声明--i ...

  4. ambari-cassandra-service

    社区:https://github.com/Symantec/ambari-cassandra-service 在HDP集群上安装和管理Cassandra服务,Apache Cassandra是一个开 ...

  5. C# 中异常抛出捕获机制--throw / try，catch，finally

    try { messagebox.show("true"); } catch { messagebox.show("false"); } finally { m ...

  6. weblogic安装时检查监视器: 必须配置为至少显示 256 种颜色，实际空间未知→失败

    1.首先如果你出现的结果是[未通过],则设置DISPLAY环境变量. 按网上方法:export DISPLAY=:0.0 然后继续安装你的东西……若成功则恭喜你~ 若[失败],按网上方法让你去看日志 ...

  7. Golang 高效实践之并发实践context篇

    前言 在上篇Golang高效实践之并发实践channel篇中我给大家介绍了Golang并发模型,详细的介绍了channel的用法,和用select管理channel.比如说我们可以用channel来控 ...

  8. python基础一整型、bool、字符串

    1整型.bool.字符串 1.整型 --数字(int) ​ 用于比较运算的 ​ 32位 -2 ** 31 ~ 2 ** 31 -1 ​ 64位 -2 ** 63 ~ 2 ** 63 -1 ​ 基础运算 ...

  9. 洛谷 P4363 [九省联考2018]一双木棋chess 题解

    题目链接:https://www.luogu.org/problemnew/show/P4363 分析: 首先博弈,然后考虑棋盘的规则,因为一个子在落下时它的上面和左面都已经没有空位了,所以棋子的右下 ...

  10. [leetcode] 62 Unique Paths (Medium)

    原题链接 字母题 : unique paths Ⅱ 思路: dp[i][j]保存走到第i,j格共有几种走法. 因为只能走→或者↓,所以边界条件dp[0][j]+=dp[0][j-1] 同时容易得出递推 ...