一个ajax上传文件的简单案例

来源：互联网发布：慈溪行知职业技术学校编辑：程序博客网时间：2024/05/22 09:06

//-----------------------------以下是示例代码-------------------------------------------------
<!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>Document</title>
</head>

<body>
    <h2>上传图片并预览</h2>
    <form action="">
        <input name='icon' type="file">
    </form>
    
    <img src="" alt="">
</body>
</html>

<script src="./js/jquery-1.12.4.js"></script>
<script>

// **//1.原生的js实现**

document.querySelector('input').onchange = function() {
        //创建异步对象
        var xhr = new XMLHttpRequest();
        //设置请求行(get请求数据写在url后面)
        xhr.open('post', './upload.php');
        //设置请求头(get请求可以省略,post不发送数据也可以省略)
        // FormData 使用设置请求头
        //注册回调函数,向服务器发送请求获得响应后发生
        xhr.onload = function() {
                console.log(xhr.responseText);
                document.querySelector('img').src = xhr.responseText;
            }
            // **新建一个FormData,将form表单放进去作参数,向服务器发送数据
                  var data = new FormData(document.querySelector('form'));
                 xhr.send(data);
    }

**//2.用jquery实现**
    $(function() {
        //给input标签绑定change事件,当input上传文件时触发事件
        $('input').on('change',function() {
            // 新建FormData对象, 注意里面的参数是DOM对象,所以需要加索引从jquery对象转化为DOM
            var formData = new FormData($('form')[0]);

           $.ajax({
                url: './upload.php',
                type: 'post',
                data: formData,
                contentType: false,   // 当有文件要上传时，设置成false
                processData: false, // 是否序列化data属性，默认true
                success: function(data) {
                   // 从后台返回的数据传给形参data,data的值是一个文件路径,赋给img标签的src属性
                  $('img').attr('src', data);
                }
            })
        })
    })
</script>

<?php
    
    move_uploaded_file($_FILES['icon']['tmp_name'],'./imgs/'.$_FILES['icon']['name']);
    
    echo './imgs/'.$_FILES['icon']['name'];

阅读全文

0 0