Question

我可以检索输入类型文本，textarea，在Ajax / JQuery页面上选择。然后将变量值传递给PHP进程页面，使用POST方法和插入数据库表的数据检索数据。一切都很好。

但是当我尝试在Ajax / Query页面上检索输入类型文件变量的值时，它给出了空白值。我尝试了不同的代码，这是我从互联网上找到的。

请注意，我可以对我的脚本进行必要的更改以使其正常工作。

personal_details.php

<form name="AddForm" id="AddForm" novalidate>
<div class="control-group form-group">
    .
    .
    <input type="file" name="file_photo" id="file_photo">
    .
    .
    other fields like Name, Mail etc
    .
    .
    <div id="success"></div>
    <!-- For success/fail messages -->
    <button type="submit" class="btn btn-primary">Send Message</button>
</div>
</form>

personal_details.js

$(function() {

$("#AddForm input,#AddForm textarea, #AddForm file").jqBootstrapValidation({
    preventSubmit: true,
    submitSuccess: function($form, event) {
        event.preventDefault(); 
        var name = $("input#name").val();
        var email = $("input#email").val();
        .
        .
        var file_photo = $("file#file_photo").val();
        //var file_photo = $('#file_photo')[0].files[0];
        //var file_photo = document.getElementById("file_photo").files[0];

        $.ajax({
            url: "./user/personal_details_p.php",
            type: "POST",
            data: {
                name: name,
                email: email,
                file_photo: file_photo,
            },
            cache: false,

            success: function(data) 
            {
                //alert(data);
                var $ResponseText_L=JSON.parse(data);
                .
                .
                if condition
                .
                .
            },
        })
    },
});

personal_details_p.php

$str_name = "";
if (isset($_POST["name"])) { $str_name = trim($_POST["name"]); }
$str_email = "";
if (isset($_POST["email"])) { $str_email = trim($_POST["email"]); }
$str_photo = "";
if(isset($_FILES['file_photo'])) { $str_photo = trim($_FILES['file_photo']['name']); }

.
.
SQL Query to insert data
.
.

$response['status']='SUC';
$response['message']="Data inserted successfully";
echo json_encode($response);
return;

Answer 1

Easy Ajax Image Upload with jQuery, PHP

所有文本框，文本区域和文件类型变量都将在PHP进程页面上提供，其名称与HTML表单页面上的名称相同。

Answer 2

要访问文件，你必须在jquery中这样做：

 $(function() {

$("#AddForm input,#AddForm textarea, #AddForm file").jqBootstrapValidation({
    preventSubmit: true,
    submitSuccess: function($form, event) {
        event.preventDefault(); 
        var name = $("input#name").val();
        var email = $("input#email").val();
         var file_data = $("#file_photo").prop("files")[0];

    var form_data = new FormData();

            form_data.append("doc_upload", file_data)
            var data_text=$('form').serializeArray();
            $.each(data_text,function(key,input){
                form_data.append(input.name,input.value);
            });
        $.ajax({
            url: "./user/personal_details_p.php",
           contentType: false,
           processData: false,
            data: form_data,  
            cache: false,

            success: function(data) 
            {
                //alert(data);
                var $ResponseText_L=JSON.parse(data);
                .
                .
                if condition
                .
                .
            },
        })
    },
});

Answer 3

我已经使用进度条为异步上传创建了自己的函数。我会尽力为你写一些例子。同时在表单中添加enctype="multipart/form-data"属性。

var file_photo = $("file#file_photo").val();
var form = file_photo.parents('form');
file_photo.on('change', processUpload);

var processUpload = function() {
    var formData = new FormData(form[0]);

    $.ajax({
        url: "./user/personal_details_p.php",
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();

            if(myXhr.upload) {
                myXhr.upload.addEventListener('progress', progressHandling, false);
            }

            return myXhr;
        },
        success: function(json) {
            file_photo.val(''); // Empty file input after upload
        },
        error: function() {
            // Do whatever you want as error message
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
};

var progressHandling = function(e) {
    if(e.lengthComputable) {
        // Uploaded bytes: e.loaded / Maximum bytes: e.total
    }
};

Answer 4

您可以使用https://github.com/blueimp/jQuery-File-Upload。它有各种选项，其文档也很好。所以，如果你可以使用插件，你可以使用这个

Answer 5

请尝试以下代码进行文件上传。

   $(function() {

    $("#AddForm input,#AddForm textarea, #AddForm file").jqBootstrapValidation({
        preventSubmit: true,
        submitSuccess: function($form, event) {
            event.preventDefault(); 
            var name = $("input#name").val();
            var email = $("input#email").val();

            // my edit for File upload code starts here

             var FileData = $('#file_photo').prop('files')[0];   
             var form_data = new FormData();                  
             form_data.append('file', FileData);

           // my edit for File upload code ends here             

            $.ajax({
                url: "./user/personal_details_p.php",
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    file_photo: file_photo,
                },
                cache: false,

                success: function(data) 
                {
                    //alert(data);
                    var $ResponseText_L=JSON.parse(data);
                    .
                    .
                    if condition
                    .
                    .
                },
            })
        },
    });

PHP - 如何在Ajax / JQuery页面上检索输入类型文件的值

5 个答案: