知识点

  • 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. [记录]python使用serial模块实现实时WebConsole

    ###tornado+websocket+多进程实现: 1.index.html <!DOCTYPE HTML> <html> <head> <style&g ...

  2. ItemsControl绑定的数据模板显示不同样式：模板选择器

    总所周知,wpf提供了数据模板,列表控件可以绑定数据实现批量显示同类型数据.不过同个数据模板显示不同的样式怎么办?这时我们可以用模板选择器. 首先我们可以将数据绑定到首先定义资源样式 <Data ...

  3. javascript之正则表达式(二)

    js正则贪婪模式与非贪婪模式 类似于贪吃蛇游戏,越吃越长.而贪婪模式就是尽可能多的匹配. 默认是贪婪模式      (尽可能多的匹配)                           例子: va ...

  4. c++小游戏——贪吃蛇

    #include #include #include #include #include <conio.h> #include #include <windows.h> usi ...

  5. Redis（一）--- 概述

    使用redis很长时间了,但只是限于使用,一直也没有进行系统的学习与底层研究,现系统的学习一下redis并记录笔记. Redis 1.Nosql 非关系型数据库,key-value键值对存贮. 2.内 ...

  6. Linux命令大全（简）

    rm--删除文件和目录   -i 删除一个已存在的文件前,提示用户进行确认.   -r 递归的删除目录. mkdir--创建目录 cp--复制文件和目录   -i 在覆盖一个已存在的目录前,提示用户进 ...

  7. 把Asp.net Core程序代码部署到Ubuntu（不含数据库）

    今天记录一下第一次把.net core 程序发布到linux系统.linux用的是ubuntu Server 18.04版本.运行的IDE是vs 2019,发布出来是.net core 2.2版本. ...

  8. 我对微服务、SpringCloud、k8s、Istio的一些杂想

    一.微服务与SOA “微服务”是一个名词,没有这个名词之前也有“微服务”,一个朗朗上口的名词能让大家产生一个认知共识,这对推动一个事务的发展挺重要的,不然你叫微服务他叫小服务的大家很难集中到一个点上. ...

  9. javaweb入门--web是什么

    WEB基本概念 首先明白web是什么,人们常说的web其实就是英文中页面的意思,准确来说是Internet主机供给外界访问的资源. 站在用户视角,也就是说,通过你浏览器(客户端)的地址栏输入资源(你要 ...

  10. Linux平台 Oracle 19c RAC安装Part2：GI配置

    三.GI(Grid Infrastructure)安装 3.1 解压GI的安装包 3.2 安装配置Xmanager软件 3.3 共享存储LUN的赋权 3.4 使用Xmanager图形化界面配置GI 3 ...