js实现图片上传方法

最新推荐文章于 2024-08-29 21:19:22 发布

weixin_30697239

最新推荐文章于 2024-08-29 21:19:22 发布

阅读量599

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/Alangc612/p/10970614.html

版权

知识点

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>

转载于:https://www.cnblogs.com/Alangc612/p/10970614.html