Ajax文件上传

利用FormData实现HTML表单提交以及文件无刷新上传

前端HTML代码:

!DOCTYPE html>
<html>
<head>
    <title>ajax文件上传title>
    <meta charset="utf-8">
head>
<body>
    <form id="form1">
        指定文件名:<input type="text" name="uname">
        选择文件:<input type="file" name="img">
        <input type="button" id="btn" value="上传">
    form>
body>
html>

前端js代码:

<script src="./jquery-3.2.1.min.js">script>
<script type="text/javascript">
    $("#btn").click(function(){
        var formData = new FormData($("#form1")[0]);
        $.ajax({
            type: 'post',
            url: './upload.php',
            data: formData,
            contentType: false, //必须false才会自动加上正确的Content-Type
            /**
             * processData必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false, 
            dataType: 'json',
            success:function(result){
                if(result.code === '200'){
                    alert(result.message);
                }
            },
            error: function () {
                alert("上传失败!");
                return false;
            }
        });
    });
script>

服务端PHP代码:


header('content-type:text/html;charset=utf-8');

/**
 * 怎么接值
 */
$uname = isset($_POST['uname']) ? $_POST['uname'] : ''; //普通的值
$file_info = isset($_FILES['img']) ? $_FILES['img'] : []; //图片的信息

//文件上传代码
move_uploaded_file($file_info["tmp_name"], "./" . $_FILES["img"]["name"]);
$result = [
    'code' => '200',
    'message' => '上传成功',
];

echo json_encode($result);

如果想要上传大文件,可能需要配置你的php.ini配置文件,详细配置方法访问:

http://blog.csdn.net/zrainload/article/details/78820168

你可能感兴趣的:(代码笔记)