Ajax文件上传

来源:互联网 发布:淘宝女式皮鞋特价 编辑:程序博客网 时间:2024/06/06 21:38

利用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代码:

<?phpheader('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