知识点

  • 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. kuangbin专题 专题二 搜索进阶 Nightmare Ⅱ HDU - 3085

    题目链接:https://vjudge.net/problem/HDU-3085 题意:有两个鬼和两个人和墙,鬼先走,人再走,鬼每走过的地方都会复制一个新鬼, 但新鬼只能等待旧鬼走完一次行程之后,下一 ...

  2. 嵊州D1T2 圣女

    嵊州D1T2 圣女 马格里多希望为自己死去却身体不腐的女儿申请圣女. 只是,他不知道神圣的基督教和教皇已经腐朽到了何种地步! 22 年来,他辗转教皇国的各个教堂,但各个教堂都只会以各种理由搪塞.推辞. ...

  3. Java学习笔记之---类和对象

    Java学习笔记之---类和对象 (一)类 类是一个模板,它描述一类对象的行为和状态  例如:动物类是一个类,动物们都有属性:颜色,动物们都有行为:吃饭 public class Dog { Stri ...

  4. Yii basic 模板支持连接多数据库

    1.首先修改db配置文件,修改格式如下: return [ 'db' => [ 'class' => 'yii\db\Connection', 'dsn' => 'mysql:hos ...

  5. goroutine上下文切换机制

    goroutine是go语言的协程,go语言在语言和编译器层面提供对协程的支持.goroutine跟线程一个很大区别就是线程是操作系统的对象,而goroutine是应用层实现的线程.goroutine ...

  6. python接口自动化（三十一）--html测试报告通过邮件发出去——下（详解）

    简介 本篇总结了 QQ (SSL)邮箱和 163(非SSL) 邮箱发送邮件,专治各种不行,总之看完这篇以后麻麻再也不用担心我的邮件收不到了.以下代码兼容 python2 和 python3,运行无异常 ...

  7. 多线程总结-同步之synchronized关键字

    目录 1.为什么要使用synchronized? 2.synchronized锁什么,加锁的目的是什么? 3.代码示例 3.1锁this和临界资源对象 3.2锁class类对象 3.3 什么时候锁临界 ...

  8. 【朝花夕拾】Android自定义View篇之（十一）View的滑动，弹性滑动与自定义PagerView

    前言 由于手机屏幕尺寸有限,但是又经常需要在屏幕中显示大量的内容,这就使得必须有部分内容显示,部分内容隐藏.这就需要用一个Android中很重要的概念——滑动.滑动,顾名思义就是view从一个地方移动 ...

  9. Oracle将两张表的数据插入第三张表且第三张表中不存在

    1.由于是先查再插所以不能使用insert into table1() values(), 要使用insert into table1() select * table2,不能使用values. 2. ...

  10. SpringMvc最全的约束——你的感冒清个人总结

    SpringMvc最全的约束--你的感冒清个人总结 <?xml version="1.0" encoding="UTF-8"?> <beans ...