AJAX文件上传
  在 Javascript 分类下   暂无评论

AJAX文件上传

  在 Javascript 分类下   暂无评论

AJAX文件上传

从http协议的角度看,上传文件,需要把文件的内容放在协议的主体信息里发送。
ajax上传文件,则意味着,js的XMLHttpRequest对象,可以获取文件的信息。
出于安全角度,JS不能获取磁盘上的文件。
因此, 在HTML5之前ajax上传文件,做不到。
网上的ajax上传,往往是用swf,或iframe伪装,不是真的ajax上传。

iframe伪装的文件上传

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="example.php" method="post" enctype="multipart/form-data" target="frm">
        <p><input type="file" name="pic"></p>
        <p><input type="submit" name="pic" value="tijiao"></p>
    </form>
    <iframe src="1.php" frameborder="0" name="frm"></iframe>
</body>
</html>

后端代码

<?php
    if($_FILES){
        echo '成功';
    }
    
?>

AJAX文件上传

但是,HTML5后,浏览器新增了FormData对象,且XHR对象也新增了一些功能,可以让我们完成ajax上传。

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="example.php" method="post" enctype="multipart/form-data" target="frm">
        <p><input type="file" name="pic"></p>
        <p><input type="submit" name="pic" value="tijiao"></p>
    </form>
</body>
<script>
    var fom = document.getElementsByTagName('form')[0];
    fom.onsubmit = function () {
        var fmdata = new FormData(this); //FormData 会把表单的数据(包括文件流), 整体打包
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (this.readyState == 4) {
            alert(this.responseText);
            }
        } 
        xhr.open('post','example.php',true);
        xhr.send(fmdata);
        return false;
}
</script>
</html>

后端代码:


<?php
    echo move_uploaded_file($_FILES['pic']['tmp_name'],'./'.$_FILES['pic']['name'])?'ok':'dd';
?>

到这里上传就算是完成了,打开example.php所在的目录就能看见上传的图片了,如果说看不到,呵呵,好吧,php.ini需要配置PHP.ini配置文件的上传限制。

post_max_size=8M
upload_max_filesize=2M
评论已关闭