首页 > 程序开发 > web前端 > JavaScript >

Ajax文件上传代码教程

2017-12-19

Ajax文件上传代码教程。利用FormData实现HTML表单提交以及文件无刷新上传。前端HTML代码:前端js代码:服务端PHP代码:

利用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: &#39;post&#39;,
            url: &#39;./upload.php&#39;,
            data: formData,
            contentType: false, //必须false才会自动加上正确的Content-Type
            /**
             * processData必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false, 
            dataType: &#39;json&#39;,
            success:function(result){

            },
            error: function () {
                alert("上传失败!");
                return false;
            }
        });
    });
</script>

服务端PHP代码:

<?php
header(&#39;content-type:text/html;charset=utf-8&#39;);

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

//文件上传代码
move_uploaded_file($file_info["tmp_name"], "./" . $_FILES["myfile"]["name"]);
相关文章
最新文章
热点推荐