使用 JavaScript 和 AJAX 从 HTML 输入标签中检索图像并将其传递给 PHP 脚本以上传到数据库

Question

我正在尝试从我的 JavaScript 文件中的 html 标签获取图像，然后使用 AJAX 调用 PHP 脚本将其上传到数据库.

我的问题是获取文件数据，然后使用 AJAX 正确地将其传递给 PHP。

我对此有哪些选择？

Answer 1

看看这个article from MDN on uploading a user-selected file

使用 id="input" 从 <input type="file" /> 获取文件：

var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
    var fileList = this.files; /* now you can work with the file list */
}

文章中的异步文件上传示例：

function sendFile(file) {
    var uri = "/index.php";
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    xhr.open("POST", uri, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // Handle response.
            alert(xhr.responseText); // handle response.
        }
    };
    fd.append('myFile', file);
    // Initiate a multipart/form-data upload
    xhr.send(fd);
}

另请查看 How can I upload files asynchronously?

Answer 2

您可以只使用 FormData() 对象从您的输入元素中检索文件并传递给您的 ajax 函数。这是一个例子：

     var data = new FormData();
     var file = $('#yourInput').files[0];
     var params = $('#yourForm').serializeArray();
     $.each(params,function(key, element){
         data.append(element.name, element.value);
     });
     data.append($('#yourInput').name, file);
    $.ajax({
    url: 'yourfile.php',
    data: data,
    type: 'POST',
    contentType: false,
    processData: false,
    success: function(result){
        alert(result);
    }

Answer 3

假设您使用的是 jquery（如果不是，请忽略此答案）：

使用jquery的get或post函数上传文件往往会出问题，这是最好使用 ajax 函数，这样您就可以传递所有需要的选项：

        yourOnSubmitHandlerFunction() {     
            //make form object with specific enctype
            var form = document.createElement('form');
            form.enctype = "application/x-www-form-urlencoded";

            //FormData object to store all form key/values
            var formdata = new FormData(form);

            //get file data
            var file = document.getElementById('image_upload_input_id').files[0];
            //append file data       
            if (file) {
                formdata.append('image_input_name', file);
            }

            //append other inputs
            formdata.append('input1_name', val);
            formdata.append('input2_name', val);

            //submit form to remote file with POST
            $.ajax("phpfile.php", {
                type: "POST",
                data: formdata,             
                cache: false,
                contentType: false,
                processData: false,
                success: function(data, textStatus){ /* Success */ }
            });
        });

使用 JavaScript 和 AJAX 从 HTML 输入标签中检索图像并将其传递给 PHP 脚本以上传到数据库

Use JavaScript and AJAX to retrieve an image from HTML input tag and pass it to a PHP script for Upload to database

javascript

php

ajax

image

input