AJAX PHP 图片上传不起作用,$_FILES 为空?

     2023-05-08     173

关键词:

【中文标题】AJAX PHP 图片上传不起作用,$_FILES 为空?【英文标题】:AJAX PHP Image upload not working, $_FILES empty? 【发布时间】:2020-03-12 08:35:48 【问题描述】:

我已经尝试研究几乎所有内容,但我没有找到修复代码的最终解决方案。正如您在调试图像中看到的那样,可以读取文件道具。在 PHP 中,print_r($_FILES); exit; 的结果是一个空数组。问题似乎是event.preventDefault();。提交必须是prevent,但文件仍需生成。

JS

    $("#cardgeneratorForm").on("submit", function (event) 
        event.preventDefault();

        var artworkimageinput = $('#inputPicture').prop('files')[0];
        var artworkimage = new FormData();
        artworkimage.append('file', artworkimageinput); 

                $.ajax(
                    url: 'generatecard.php',
                    method: 'POST',
                    data: 
                        artworkimage: artworkimage,
                    ,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success : function(filename)
                    ,
                    fail: function()
                    
                ); 

PHP

    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST")
    
    move_uploaded_file($_FILES['file']['tmp_name'], 'artwork/' . $_FILES['file']['name']); 
    

HTML

<form class="cardgeneratorForm" id="cardgeneratorForm" method="post" enctype="multipart/form-data" action="generatecard.php">
                                    <div class="inputPicture-container custom-file col-12">
                                        <input type="file" name="file" class="custom-file-input" accept='.jpg, .jpeg, .png, .webp' id="inputPicture" lang="en">
                                        <label class="custom-file-label" for="inputPicture">Card Picture</label>
                                    </div>

     <button class="btn btn-primary btn-block btn-xs reset-button">
                                            <span><i class="fas fa-redo"></i>Reset</span>
                                        </button>
</form>

【问题讨论】:

前 3 行代码需要在提交处理程序中 你是对的,他们是,实际上我写的有点复杂,因为代码要大得多,我试图将它缩短为相关代码。我编辑了它! 【参考方案1】:

您可以这样做。

$('#cardgeneratorForm').on('submit',function(e) 
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax(
        method:$(this).attr('method'), //dynamically getting the method of the form
        url: $(this).attr('action'), //dynamically getting the action of the form
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data)
            console.log("success");
            console.log(data);
        ,
        error: function(data)
            console.log("error");
            console.log(data);
        
    );
);

选择文件后立即开始上传(可选)

$("#inputPicture").on("change", function() 
    $("#cardgeneratorForm").submit();
);

我删除了一些额外的括号,现在它可以工作了。

希望对你有帮助!!

【讨论】:

这没有帮助,它具有相同的结果。 preventDefault 阻止它工作。 $_FILES 仍然是空的。 @DappFuture 我刚刚编辑了我的答案。现在检查我的答案。我删除了代码中有一些额外的括号,现在它正在工作。这里preventDefault没有什么问题,因为这里是用来防止正常的表单提交,所以我们可以通过AJAX上传文件asynchronously 我试过了,但它不起作用,我不知道为什么。还在检查。 $_FILES / $_FILES['file']['name'] 对我来说是空的。 @DappFuture 刚刚为您录制了一个视频教程,以便您可以跟随并使其发挥作用。 youtu.be/xF9Xws5LqwE 感谢我没想到的视频。我还不确定是什么问题,但我将此部分外包给了另一个 ajax 调用,它的工作方式与您编写它的方式相同。但是在我现有的 ajax 调用中它不起作用,我仍然需要弄清楚。但我没有提到的是我的 ajax 调用在这里面,这可能会导致问题:“html2canvas(document.getElementById('card-build'),backgroundColor: null, scrollX: 0, scrollY: -window.scrollY) .then(function(canvas) "【参考方案2】:

使用 ajaxform 插件,你可以在这里找到一个例子 example ajaxform

<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
        $(document).ready(function() 
         //   document.getElementsByName('userid')[0].value=" request.session.user_id ";
            $(".createnews").click(function()
                $("#formdata").ajaxForm(target: '#diagshow');
            );
        );
</script>

【讨论】:

我不能使用这样的插件。我的代码比我发布的要复杂一些,我只需要按照我在帖子中尝试的方式修复图片上传即可。 我之前尝试过使用 ajax 上传图像+数据,但直到我使用了这个 js 插件后才成功 我的代码已经包含一个图片上传和 sql insert 可以正常工作,但是第一个图片上传是通过 base64 上传的,第二个只是来自输入的图片,因为 php var 是空的,所以它不起作用。 $image = $_POST['image']; $位置=“卡/”; $image_parts = explode(";base64,", $image); $image_base64 = base64_decode($image_parts[1]); file_put_contents($fullfilename, $image_base64); 是的空变量,因为要通过表单发送文件,您需要一个可与 ajax 配合使用的提交按钮, 嗯,是的,问题似乎是“event.preventDefault();”当我删除它时,它可以工作。但我不想提交表单,必须阻止它。

if(isset($_FILES)) 在 PHP 中不起作用

...获取输入类型文件值,使用isset($_FILES[\'NAME\'])从表单获取上传的图像值,我放了一个echo\'string\'在isset条件的第一行,它没有显示它<formrole="f 查看详情

PHP Ajax文件上传不起作用[重复]

...p并在Modalbox中有一个表单。还有一个文件上传,我想上传图片,但如果我点击提交按钮,网站看起来像是即时重新加载并且没有文件上传...这是我的Ajax脚本<scripttype="text/javascript 查看详情

AJAX 上传后 $_FILES 为空

】AJAX上传后$_FILES为空【英文标题】:$_FILESemptyafterAJAXupload【发布时间】:2019-11-1415:10:22【问题描述】:我正在开发一个简单的脚本来通过AJAX上传文件,但是在表单提交之后,变量$_FILES是完全空的,虽然文件存在于php://input中,... 查看详情

使用 AJAX Jquery 在 PHP 中上传图像不起作用

】使用AJAXJquery在PHP中上传图像不起作用【英文标题】:ImageUploadinPHPusingAJAXJquerynotworking【发布时间】:2016-11-1118:40:13【问题描述】:我有一个包含4个文本字段和一个图像文件的表单。我必须通过AJAX调用上传它。工作2天后......我... 查看详情

php上传文件(上传后显示图片)

...e=="")echo"<script>alert('请先选择要上传的图片文件!');window.history.back();</script>";$tmp_name=$_FILES["userfile"]["tmp_name"];if($type!="imagepeg"&&$type!="image/j 查看详情

通过ajax发送php代码不起作用

】通过ajax发送php代码不起作用【英文标题】:Sendphpcodeviaajaxnotworking【发布时间】:2013-01-1619:02:25【问题描述】:我正在尝试使用jquery发出ajax请求,但每次发送php函数时都会收到403Forbidden错误。我需要的一个例子是这个***注释输... 查看详情

当我将 var 从 ajax 发送到 php 时,如果 (isset $_Post[]) 不起作用

】当我将var从ajax发送到php时,如果(isset$_Post[])不起作用【英文标题】:If(isset$_Post[])doesn\'tworkwhenisendavarfromajaxtophp【发布时间】:2021-12-1913:46:43【问题描述】:我在尝试将AJAX帖子捕获到我的PHP代码时遇到问题让我解释一下:所以... 查看详情

Ajax上传图片失败

】Ajax上传图片失败【英文标题】:Ajaxuploadimagefailure【发布时间】:2016-04-1122:02:25【问题描述】:我正在尝试使用ajaxpost在服务器上上传图片。我遇到了大尺寸图片的问题。例如,我可以毫无问题地上传1MB图像,但是当我尝试上... 查看详情

使用 ajax、jquery 和 PHP 从数据库更新图像不起作用

...【问题描述】:我想更新已登录我网站的用户的个人资料图片。我使用ajax、jquery、php来更新数据,以便在不刷新页面的情况下更新数据。此代码仅用于将图像上传到文件夹,但是当我使用此代码从数据库更新图像 查看详情

图片上传到 PHP 服务器在真正的 iOS 设备上不起作用

】图片上传到PHP服务器在真正的iOS设备上不起作用【英文标题】:PictureuploadtoPHPserverdoesn\'tworkonarealiOSdevice【发布时间】:2013-03-1302:41:27【问题描述】:我无法从iPhone/ipad上传一些图片到我的网络服务器上。事实上,我的代码在MAC... 查看详情

php上传图片没有文件名后缀

...有,就是要检查一下,move_uploaded_file函数里,目标地址的图片名称是否拼接了后缀名追问$_FILES["file"]["name"]这个的文件名应该是全部文件名,为什么我的代码获取的却不包含后缀名,上传的那张图片是有后缀名的参考技术A$_FILES[&... 查看详情

AJAX上传文件和文本不起作用

】AJAX上传文件和文本不起作用【英文标题】:AJAXuploadfileandtextnotwork【发布时间】:2015-06-1512:45:40【问题描述】:我正在使用此ajax代码提交表单并上传多个输入文件。我想通过ajax发送所有表单数据。文本输入成功发送,但文件... 查看详情

节点 js multer 文件上传不起作用。 req.file 和 req.files 始终未定义

】节点jsmulter文件上传不起作用。req.file和req.files始终未定义【英文标题】:nodejsmulterfileuploadnotworking.req.fileandreq.filesalwaysundefined【发布时间】:2018-08-0403:02:54【问题描述】:我正在尝试将文件上传到我的服务器,但req.file和req.fil... 查看详情

特定文件类型上传不起作用

】特定文件类型上传不起作用【英文标题】:Specificfiletypesuploadnotworking【发布时间】:2015-01-2917:26:27【问题描述】:我正在创建一个脚本,其中只能上传某些视频类型,但目前卡住了。这是我的代码-<?php$title=isset($_POST[\'title\']... 查看详情

文件上传 php $_FILES 未定义索引错误

】文件上传php$_FILES未定义索引错误【英文标题】:fileuploadphp$_FILESundefinedindexerror【发布时间】:2014-02-1119:26:54【问题描述】:<?php$name=$_FILES["file"]["name"];//$size=$_FILES[\'file\'][\'size\']//$type=$_FILES[\'file\'][\'type\']$tmp_name=$_ 查看详情

上传多张图片时,对$_files的处理.upload

 上传多张图片,要对$_FILES进行重新处理.1//添加2publicfunctionaddCourseAlbumAction()3{4$CourseAlbumModel=newCourseAlbumModel();5$CourseAlbumModel->title=$_REQUEST["title"];6$CourseAlbumModel->courseId=$_REQU 查看详情

PHP 文件上传不读取 $_FILES['image'] [重复]

】PHP文件上传不读取$_FILES[\\\'image\\\'][重复]【英文标题】:PHPfileuploadsdoesnotread$_FILES[\'image\'][duplicate]PHP文件上传不读取$_FILES[\'image\'][重复]【发布时间】:2016-04-2712:52:29【问题描述】:我有这个输入类型<inputclass="btnbtn-success"typ... 查看详情

PHP $_FILES 多文件上传问题

】PHP$_FILES多文件上传问题【英文标题】:PHP$_FILESmultiplefileuploadingproblem【发布时间】:2011-11-1918:47:32【问题描述】:我在PHP中上传多个文件有点问题,我有这个html表单:<formmethod="post"action="upload.php"enctype="multipart/form-data"><... 查看详情