2.ajax文件上传

最新推荐文章于 2025-03-21 11:01:13 发布

原创最新推荐文章于 2025-03-21 11:01:13 发布 · 148 阅读

CC 4.0 BY-SA版权

我们有的时候上传文件的时候需要把整个页面都要刷新如果页面少的是的时候是很快就可以刷新的但是页面东西一旦多的时候就会十分缓慢所以我们用ajax技术来上传

//这是一个上传图片的页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<form action="" enctype="multipart/form-data" id="upForm">

    <input type="file" name="file" ><br><br>
    <input type="button" value="提交" onclick="checkfile()">
</form>

<div class="picDis">
    <img src="" alt="">
</div>

</body>
</html>

//我们要引入jQuery来做

<script src="jquery-1.9.1.min.js"></script>//引入
<script>
    function checkfile() {
        //formdata储存异步上传数据
        var formData = new FormData($('form')[0]);
        console.log(formData);
        formData.append('file', $(':file')[0].files[0]);
        //坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
        $.ajax({
            url: 'ajax1.php',//地址
            type: 'POST',//方法
            data: formData,
            //这两个设置项必填
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data)
                var srcPath = data;

                //注意这里的路径要根据自己的储存文件的路径设置
                $('.picDis img').attr('src', srcPath);
            }
        })
    }
</script>

//新的页面处理上传的图片

<?php
$upFile = $_FILES['file'];

/**
 * 创建文件夹函数,用于创建保存文件的文件夹
 * @param str $dirPath 文件夹名称
 * @return str $dirPath 文件夹名称
 */
function creaDir($dirPath){
    $curPath = dirname(__FILE__);
    $path = $curPath.'\\'.$dirPath;
    if (is_dir($path) || mkdir($path,0777,true)) {
        return $dirPath;
    }
}

//判断文件是否为空或者出错
if ($upFile['error']==0 && !empty($upFile)) {
    $dirpath = creaDir('upload');
    $filename = $_FILES['file']['name'];
    $queryPath = './'.$dirpath.'/'.$filename;
    //move_uploaded_file将浏览器缓存file转移到服务器文件夹
    if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
        echo $queryPath;
    }
}

这是简单的一个用ajax上传文件的代码

用了ajax技术