在JavaScript中使用序列化数组时如何上传图像? [英] How to upload image while using serialize Array in JavaScript?

问题描述

我正在处理一种表单，该表单需要在不重新加载页面的情况下将某些数据与图像一起插入.在我这边，当表单中没有图像时，一切工作正常，但是如果表单中有< input type ="file"> ，则我的代码未通过文件/图像信息.你们能教我在代码中添加些什么来上传或传递图像吗?

I am working on a form which need to insert some data with an image without reloading the page. In my side everything is working fine when there is no image filed in the form, but if there is an <input type="file"> in my form, then my code is not passing the file/image information. Can you guys please teach me what to add in my code to upload or pass image please?

我的代码HTML表单

<form action="action.php" method="POST" enctype="multipart/form-data" id="myform">
   <input type="hidden" value="access" name="label">
   <input type="text" name="one">
   <input type="text" name="two">
   <input type="file" name="image">
   <button type="submit" id="mybtn">Add Data</button>
</form>
<div id="myresult"></div>

我的JavaScript

My JavaScript

$('#mybtn').click( function(){
    $.post(
    $('#myform').attr('action'),
    $('#myform:input').serializeArray(),
        function(result) { 
           // Some Stuff...
        }
    );
});

我的PHP

include 'database.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $label = ["access"];
    if (in_array($_POST['label'], $label)) {
        switch ($_POST['label']) {
            case 'access':
                $one = $_POST['one'];
                $two = $_POST['two'];
                $file_name = $_FILES['image']['name'];
                $file_size = $_FILES['image']['size'];
                $file_temp = $_FILES['image']['tmp_name'];
                $error = [];
                $valid = [];
                $flag1 = $flag2 = $flag3 = false;
                if (!empty($one)) {
                    // Some validation
                    $flag1 = true;
                } else {
                    $flag1 = false;
                }
                if (!empty($two)) {
                    // Some validation
                    $flag2 = true;
                } else {
                    $flag2 = false;
                }
                if (!empty($file_name)) {
                    // Some validation
                    $flag3 = true;
                } else {
                    $flag3 = false;
                }
                if ($flag1 && $flag2 && $flag3) {
                    // move_uploaded_file() + Insert All data
                    if ($result) {
                        $valid[] = "Data added successfully!";
                    } else {
                        $error[] = "Please try again later!";
                    }
                } else {
                    $error[] = "Something went wrong!";
                }

                // ALERT MESSAGE [error] and [valid]
                if (!empty($error)) {
                    foreach ($error as $value) {
                        echo json_encode($value);
                    }
                }
                if (!empty($valid)) {
                    foreach ($valid as $value) {
                        echo json_encode($value);
                    }
                }
                break;
            default:
                # code...
                break;
        }
    }
}

在没有输入类型文件的情况下，此代码可以完美地工作而无需重新加载页面.我想知道我必须在JavaScript部分中添加什么代码才能使用输入类型文件成功执行代码.

This code works perfectly without reloading page while there are no input type file. I want to know what code I have to add in my JavaScript section to execute the code successfully with an input type file.

推荐答案

$('#dataBtnIMG').click( function(){
    var form = $('#dataFormIMG');
    var formData = new FormData($('#dataFormIMG')[0]);
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success:function(result) {
            // Some Stuff
        }
    });
});

这篇关于在JavaScript中使用序列化数组时如何上传图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！