Question

我想使用jQuery与数据异步上传图像...但无法上传...只有数据变量可以在进程页面中获取但无法使用$ _FILES获取图像文件...... < / p>

img_upload.php

<?php wp_nav_menu( array( 'menu' => 'Main Menu' ) ); ?>

img_upload.js

<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_p.php

$(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,
            })
        },
    });  
});

请建议我在JQuery文件“img_upload_p.js”中声明（upload_photo：FileImgData）的图像变量是否正确。

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

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

PHP图片上传代码已经准备好并且处于工作状态......但只是遇到了上述两点的问题...

Answer 1

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

我希望它会有所帮助。

Answer 2

<强> 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']); }
```

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

2 个答案: