fetch异步上传图片(附html+JavaScript+php代码)

卢植
• 阅读 1425

效果

fetch异步上传图片(附html+JavaScript+php代码)

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>图片上传示例</title>
        <meta charset="utf-8">
        <script src="upload.js"></script>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            #app{
                width: 500px;
                margin: 100px auto 0;
                padding: 20px 20px;
                background: #eee;
                border-radius: 15px;
            }
        </style>
    </head>
<body>
    
    <div id="app">
        <h1>fetch图片上传示例</h1>
        
        <!--上传表单-->
        <input type="file" id="imageFile" accept="image/*">
        
        <!--上传结果-->
        <div id="result"></div>
    </div>
</body>
</html>

upload.js

// 确保JavaScript代码在DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    
    // 获取点击上传的按钮
    var fileButton = document.getElementById('imageFile');
    
    // 监听选择文件按钮是否已经选择了文件
    fileButton.addEventListener('change', function (){
        
        // 获取选择的文件
        var fileSelected = fileButton.files[0];
        
        // 执行上传函数
        uploadFile(fileSelected, function(error, response) {
            if (error) {
                
                // 上传文件失败
                console.log(error);
            } else {
                
                // 上传文件成功
                var jsonData = JSON.parse(response);
                
                console.log(jsonData);
                
                // 显示上传结果预览
                document.getElementById('result').innerHTML = '<img src="'+jsonData.url+'" width="350" />';
            }
        });
    });
    
    // 清空file表单的选择
    fileButton.value = '';
})

// 上传函数
function uploadFile(file, callback) {
    
    // 获取表单数据
    var formData = new FormData();
    formData.append('file', file);
    
    // 请求上传服务器
    fetch('upload.php', {
        method: 'POST',
        body: formData,
    })
    .then(function(response) {
        return response.text();
    })
    .then(function(data) {
        callback(null, data);
    })
    .catch(function(error) {
        callback(error, null);
    });
}

upload.php

<?php
// 编码
header("Content-type:application/json");
 
// 获取文件
$file = $_FILES["file"]["name"];
 
// 获取文件后缀名
$hzm = substr($file,strpos($file,"."));
 
// 设置新文件名
$newfile = date("Y-m-d")."-".rand(100,999);
 
// 允许上传的后缀
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $file);
$extension = end($temp);

if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 10485760)
&& in_array($extension, $allowedExts)){
    
    // 判断上传结果
    if ($_FILES["file"]["error"] > 0){
        
        $result = array(
            'code' => 201,
            'msg' => '上传失败'
        );
    }else{
        
        // 上传文件
        move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$newfile.$hzm);
        $file_url = 'http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];
        $result = array(
            "code" => 200,
            "msg" => "上传成功",
            "url" => dirname($file_url)."/upload/".$newfile.$hzm
        );
    }
}else{
    
    $result = array(
        'code' => 202,
        'msg' => '此类文件不能上传'
    );
}

// 输出JSON
echo json_encode($result, JSON_UNESCAPED_UNICODE);
?>

注意,需要在同一目录下建立upload目录以存放上传的文件。

fetch异步上传图片(附html+JavaScript+php代码)

作者

TANKING

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这