分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

ajax利用FormData实现多文件上传php获取

发布时间:2023-09-06 01:35责任编辑:彭小芳关键词:文件上传
  • 前台代码(注意,不需要用到form标签):
    a. html部分:

    b. js部分:

    c. 完整代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <form>
    <input type="file" multiple id="lee_file">
    <input type="text" id="lee_text" value="test">
    <input type="button" value="上传图片" id="lee_button">
    </form>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
    var lee_button = $(‘#lee_button‘);
    function sendFile(){
    var lee_file = $(‘#lee_file‘);
    var lee_text = $(‘#lee_text‘);
    var form_data = new FormData();
    for(var i in lee_file[0].files){
    form_data.append(‘pics[]‘,lee_file[0].files[i]);
    }
    form_data.append(‘text‘,lee_text.val());
    $.ajax({
    url: ‘http://localhost/111.php‘,
    type: ‘POST‘,
    cache: false,
    data: form_data,
    processData: false,
    contentType: false
    }).done(function(res) {
    console.log(res);
    }).fail(function(res) {
    console.log(‘fail‘);
    });
    }
    lee_button.click(function(){
    sendFile();
    })
    </script>
    </body>
    </html>
  • php获取:

    完整代码:
    <?php
    header(‘Access-Control-Allow-Origin: *‘);
    $pics = $_FILES[‘pics‘];
    var_dump($pics);
    $text = $_POST[‘text‘];
    var_dump($text);
  • ajax利用FormData实现多文件上传php获取

    原文地址:http://blog.51cto.com/12173069/2059657

    知识推荐

    我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
    icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved