如何使用ajax将输入文件数据值发送到php页面

Posted 2023-03-14

【中文标题】如何使用ajax将输入文件数据值发送到php页面

【英文标题】：How to send input file data value using ajax to a php page

【发布时间】：2014-09-10 07:30:04

【问题描述】：

我想要做的是每当用户选择图片并单击按钮时，它会将图像移动到特定文件夹并将链接保存到数据库 user_image 列。

我的问题是单击提交按钮后图片的实际名称未保存在数据库列中。例如Oppa/upload/就是数据库中保存的值没有图片文件名。

我认为photo.php没有收到文件的值，谁能帮我解决一下。

<input type='file' id="imageInput" name="imageInput" accept="image/*" />
<button  id="changePicture" name="changePicture">Submit</button>

脚本：

var data = ;
        data.imageInput = $('#imageInput').val();
        data.email = $('#email').val();

        $.ajax(
            type: "POST",
            url: "Oppa/view/photo.php",
            data: data,
            cache: false,
            success: function (response) 

            if (Number(response) == 1)
                
                   $("#dialog-confirm-changedImage").dialog("open");
                
            
        );
            return false;

照片.php

<?php
include_once('../dbc/database.php');

$db = new Connection();
$db = $db->dbConnect();
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


$email = isset($_POST['email']) ? $_POST['email'] : "";

$image = addslashes(file_get_contents($_FILES['imageInput']['tmp_name']));
$image_name = addslashes($_FILES['imageInput']['name']);
$image_size = getimagesize($_FILES['imageInput']['tmp_name']);

move_uploaded_file($_FILES["imageInput"]["tmp_name"], "Oppa/upload/" . $_FILES["imageInput"]["name"]);
$location = "Oppa/upload/" . $_FILES["imageInput"]["name"];


if(!empty($_POST['email'])) 

        $q = "UPDATE tbl_user SET user_image = '$location' WHERE user_email= :email ";
        $query = $db->prepare($q);
        $query->bindParam(':email', $email);
        $results = $query->execute();
        echo "1";


?>

【问题讨论】：

val无法获取图片，必须使用formData

你必须使用 jquery ajax 图片上传器 - zurb.com/playground/ajax-upload

@adeneo 怎么用？

【参考方案1】：

    <input type='file' id="imageInput" name="imageInput" accept="image/*" />
    <button  id="changePicture" name="changePicture">Submit</button>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $("#changePicture").click(function()

            var file_name=$("#imageInput").val();
            var fileName = $("#imageInput").val();
            var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1); 


            var base_url = 'Oppa/view/photo.php';

            var file_data=$("#imageInput").prop("files")[0];



            var form_data=new FormData();
            form_data.append("file",file_data);
            $.ajax(
            type:"POST",
            url: base_url,
            datatype:'script',
            cache:false,
            contentType:false,
            processData:false,
            data:form_data,
            success:function()
            //------------
            ,
            error:function()
            //----------
            


                );


            $("#imageInput").val('');


            )


    </script>




<?php
include_once('../dbc/database.php');

$db = new Connection();
$db = $db->dbConnect();
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


$email = isset($_POST['email']) ? $_POST['email'] : "";

$image = addslashes(file_get_contents($_FILES['file']['tmp_name']));
$image_name = addslashes($_FILES['file']['name']);
$image_size = getimagesize($_FILES['file']['tmp_name']);

move_uploaded_file($_FILES["file"]["tmp_name"], "Oppa/upload/" . $_FILES["file"]["name"]);
$location = "Oppa/upload/" . $_FILES["file"]["name"];


if(!empty($_POST['email'])) 

        $q = "UPDATE tbl_user SET user_image = '$location' WHERE user_email= :email ";
        $query = $db->prepare($q);
        $query->bindParam(':email', $email);
        $results = $query->execute();
        echo "1";


?>

别忘了点赞我的回答:)

【讨论】：

还要检查上传文件夹的权限

点击按钮后仍然没有任何反应

我看到了请求负载，但 photo.php 中没有任何反应

使用 echo $_FILES["file"]["name"];死（'检查'）；在您的 photo.php 顶部 .. 它显示任何价值吗？检查使用 firebug 控制台

图像链接现在保存在数据库中，但实际文件没有移动到上传文件夹。你能帮忙吗？

【参考方案2】：

看看这个http://malsup.com/jquery/form/#ajaxSubmit。

包含那个插件jquery.form.js 然后试试这个。

$('#FormID').ajaxSubmit( //FormID - id of the form.
        type: "POST",
        url: "Oppa/view/photo.php",
        data: $('#FormID').serialize(),
        cache: false,
        success: function (response) 

        if (Number(response) == 1)
            
               $("#dialog-confirm-changedImage").dialog("open");
            
        
    );

这应该可行。我正在使用它来上传 ajax 图片。

谢谢。

【讨论】：

你检查过，你是否在 photo.php 中获得了 $_FILES 数据。

在我的网络应用程序中，我没有使用提交。我只使用按钮 id# 和 jquery 脚本。

对于图片上传，你必须使用带有 attr enctype="multipart/form-data" 的表单也检查这个malsup.com/jquery/form/#file-upload

图像链接现在保存在数据库中，但实际文件没有移动到上传文件夹。你能帮忙吗？

检查上传的文件夹权限以及检查给定的上传路径是否正确。谢谢。

【参考方案3】：

试试这个，

var data= false;
if (window.FormData) 
     data= new FormData();

    var email = $('#email').val();

if (formdata) 
    data.append("image", $('input[type=file]')[0].files[0]);
    data.append("email","+email+");
    data.append("fileName",$('input[type=file]')[0].files[0].name);
 

 if (data) 
          jQuery.ajax(
                    url: "php/upload.php",
                    type: "POST",
                    data: data,//Now you attached form datas with filename also,
                    processData: false,
                    contentType: false,
                    success: function (data) 
                       alert("Response  Data : "+data);
                    
                );
            

【参考方案4】：

jQuery("#changePicture").click(function()

    var file_name=jQuery("#imageInput").val();
    var fileName = jQuery("#imageInput").val();
    var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1); 


    var base_url = 'Oppa/view/photo.php';

    var file_data=jQuery("#imageInput").prop("files")[0];



    var form_data=new FormData();
    form_data.append("file",file_data);
    jQuery.ajax(
    type:"POST",
    url: base_url,
    datatype:'script',
    cache:false,
    contentType:false,
    processData:false,
    data:form_data,
    success:function()
    //------------
    ,
    error:function()
    //----------
    


        );


    jQuery("#imageInput").val('');


    )

希望对你有帮助别忘了点赞我的回答

【讨论】：

你能解释一下你的答案吗？

点击时即使您使用该文件的 id 获取文件名和值，我使用 fileName.substring(fileName.lastIndexOf('.') + 1); 来获取您可以使用的文件扩展名如果需要，请检查图像，之后我正在创建新的表单数据对象并使用 prop 传递文件属性和值，并且在 ajax 帖子中我正在发送图像的值

你在 firebug 中检查了 ajax requesr 吗？你能告诉我你是如何在 photo.php 中获取 Posted 文件值的吗？你是否提供了 photo.php 文件的正确 url？

在我当前的代码中，如果我点击上传它只保存 Oppa/upload/没有文件名。在 urs 如果我点击没有任何反应。你可以在我的脚本中应用 formData 吗？我认为这是我的代码中的问题。