如何在JQuery页面上获取文件类型数据(图像)并发送到PHP页面进行图像上传


How to fetch file type data (image) on JQuery page and send to PHP page for image upload

我想使用 jQuery 与数据异步上传图像...但无法上传...在进程页面中只能获取数据变量,但无法使用 $_FILES 获取图像文件......

img_upload.php

<form name="frm" id="frm" novalidate enctype="multipart/form-data">
    <input type="text" id="txt_name" name="txt_name" /> 
    <input type="file" name="img_upload" id="img_upload">   
</form>

img_upload.js

$(function() {
    $("#frm_edit input, #frm_edit textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
        var txt_name =  $("input#txt_name").val();
        var FileImgData = $('#img_upload').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', FileImgData);
            $.ajax({
                url: "./img_upload_p.php",
                type: "POST",
                data: {
                    txt_name: txt_name,
                    upload_photo: FileImgData
                },
                cache: false,
            })
        },
    });  
});

img_upload_p.php

$str_name="";    
if(isset($_POST["txt_name"])) { $str_name=trim($_POST["txt_name"]); }  
$str_upload_photo="";  
if(isset($_FILES['file_photo']))
{ $str_upload_photo = trim($_FILES['file_photo']['name']); }

请告诉我在JQuery文件"img_upload_p.js"中声明的图像变量(upload_photo:FileImgData)是否正确。

此外,在"img_upload_p.php"中获取图像文件变量的方式是否正确。

如果其中任何一个是错误的,那么我如何在 JQuery 文件中分配该图像变量并在 PHP 进程页面中获取......

PHP 图像上传代码已准备就绪并处于工作状态...但只是对上述两点有问题......

img_upload.js

$(function() {
    $("#frm_edit input, #frm_edit textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            var formData = new FormData();
            formData.append("hdn_pkid", $("input#hdn_pkid").val()); // if hidden variable is passed             
            formData.append("txt_name",$("input#txt_name").val()); // if other input types are passed like textbox, textarea, select etc...
            formData.append('img_upload', $('input[type=file]')[0].files[0]); // if image or other file is passed
            $.ajax({
                url: "./img_upload_p.php",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                cache: false,
            })
        },
    });  
});

img_upload_p.php

    使用
  • POST 方法获取所有变量的值,并将它们存储在新变量中,以便像往常一样在此页面上使用和处理。

  • 获取文件变量,如下所述代码,然后使用普通PHP函数或您自己的方式上传图像。

    if(isset($_FILES['img_upload']))
    { $str_ = trim($_FILES['img_upload']['name']); }
    

最好的方法之一是使用 Dropzone js,这是使用 ajax 上传文件的最佳库,它还提供了进度条。您可以在服务器端使用自己的 PHP(或任何其他服务器端语言)代码。

我希望它会有所帮助。