ajax异步上传文件

最新推荐文章于 2018-11-05 15:56:00 发布

娄笙悦

最新推荐文章于 2018-11-05 15:56:00 发布

阅读量850

点赞数 1

分类专栏：方法-技巧与案例文章标签： ajax php 异步上传文件

本文链接：https://blog.csdn.net/weixin_41424247/article/details/79103956

版权

方法-技巧与案例专栏收录该内容

28 篇文章 0 订阅

订阅专栏

序

在使用form表单上传图片或者其他文件的时候，如果采用默认提交方式往往不是异步的（页面刷新），这不是我们想要的效果。如果您跟我一样，想采用异步提交的方式，那么请看下面的“小栗子”。

file.html代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>file upload test page</title>
</head>
<body>
    <form id="msg" enctype="multipart/form-data"><!--注意：enctype属性不能少-->
        <input type="file" name="file"><br>
        <input type="submit" id="submit">
    </form>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../js/file.js"></script>
</body></html>

file.js代码部分

$(function () {
    uploadFileEvent();
    function uploadFileEvent() {
        var sub = $('#submit');
        sub.click(function (e) {
            var datas = new FormData($('#msg')[0]);
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: '../../admin/file.php',//请求地址
                cache: false,
                data: datas,
                processData: false, //特别注意这个属性不能省
                contentType: false, //特别注意这个属性不能省
                dataType: 'json',
                success: function (res) {
                    alert(res.msg);
                    if (res.status == 1){
                        $('#msg')[0].reset();//上传成功时，重置form表单
                    }
                }
            })
        })
    }
});

file.php代码部分

<?php
header('Content-type:text/html;charset=utf-8');
if ($_FILES['file']) {
    $file = $_FILES['file'];//获取上传文件的全部信息

    $name = $file['name'];//获取上传文件的名称
    $type = $file['type'];//获取上传文件的类型
    $size = $file['size'];//获取上传文件的大小
    $tmpName = $file['tmp_name'];//获取上传文件的临时存储目录

    //file_exists(path)能够判断path路径下是否存在xx文件
    if (file_exists('../sources/' . $name)) {
        $msg = ['msg' => '已存在该文件名相同的文件。', 'status' => 0];
        responseEvent($msg);
    } else {
        //move_uploaded_file(tmpPath, targetPath)方法能够将tmpPath路径下的文件移到targetPath路径下（同时修改文件名）
        move_uploaded_file($tmpName, '../sources/' . $name);
        $msg = ['msg' => '上传成功。', 'status' => 1];
        responseEvent($msg);//向前端返回处理结果集合
    }
}
function responseEvent($msg)
{
    echo json_encode($msg);//返回json字符串
    exit();
}

上面的例子只是一个简单的上传文件方法，实际开发当中往往需要做很多的安全校验，比如限制文件类型，大小，以及上传文件的操作权限等等。这里仅作为前端小白学习后台异步上传文件操作参考案例。

欢迎点赞，谢谢关注：)

娄笙悦

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax异步上传文件

序在使用form表单上传图片或者其他文件的时候，如果采用默认提交方式往往不是异步的（页面刷新），这不是我们想要的效果。如果您跟我一样，想采用异步提交的方式，那么请看下面的“小栗子”。file.html代码部分html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="wid
复制链接

扫一扫