Question

可以使用Javascript更新html表单的文件类型输入元素吗？在我的情况下，我生成一个图像对象，我想将其分配给类型文件的输入字段。就像我们从Javascript分配输入表单的文本字段一样，我们也可以从Javascript更新文件输入吗？我的png类型的图像对象存储在我想要分配给输入字段的变量中。

Answer 1

不，您无法设置文件类型的输入值。这将是一个安全风险，因为它允许您从用户的计算机上传任何文件。

Answer 2

您可以将ajax与FormData对象一起使用。 https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects为您提供了API的概述。

Answer 3

你可以用Ajax做到这一点您需要从画布中提取图像数据并将其转换为Blob对象。然后将它附加到FormData对象并使用Ajax请求发送它。

我写了一个关于它是如何工作的工作示例：

<?
    // handle upload
    if (isset($_FILES['image']) && isset($_POST['name']))
    {
        file_put_contents('data', serialize($_POST));
        move_uploaded_file($_FILES['image']['tmp_name'], $_FILES['image']['name']);
        die;
    }
    $data = array();
    if (file_exists('data'))
        $data = unserialize(file_get_contents('data'));
?>
<html>
    <head>
        <title>CANVAS Upload</title>
    </head>
    <body>
        <h3>Uploaded:</h3>
        <ul>
            <li>
                Image: <img src="<?=file_exists('image.png')?'image.png':''?>"/>
            </li>
            <li>
                Name: <?=isset($data['name'])?$data['name']:''?>
            </li>
        </ul>
        <h3>Form:</h3>
        <form method="post" enctype="multipart/form-data">
            <ul>
                <li>
                    Image: <canvas data-name="image" width="100" height="100"></canvas>
                </li>
                <li>
                    Name: <input type="text" name="name"/>
                </li>
            </ul>
            <button>Upload</button>
        </form>
        <script>
            var form = document.querySelector("form");
            var canvas = form.querySelector("canvas");
            var ctx = canvas.getContext("2d");

            ctx.fillStyle = "#E0E0E0";
            ctx.beginPath();
            ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
            ctx.fill();

            canvas.onclick = function(e) { // modify canvas by drawing circles
                ctx.fillStyle = "rgb("+Math.floor(128+Math.random()*128)+",0,0)";;
                ctx.beginPath();
                ctx.arc(e.offsetX, e.offsetY, 10, 0, 2 * Math.PI, false);
                ctx.fill();
            };
            function canvasToBlob(canvas) { // extract the image data and convert it to a Blob object
                var dataURI = canvas.toDataURL("image/png");
                var binary = atob(dataURI.split(',')[1]);
                var array = [];
                for(var i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i));
                }
                return new Blob([new Uint8Array(array)], {type: 'image/png'});
            }
            form.onsubmit = function(e) {
                e.preventDefault();

                var form_data = new FormData(this); // create a FormData object and pass it the form element to fill it with form data
                form_data.append("image", canvasToBlob(canvas), "image.png"); // add image data from canvas

                var xhr = new XMLHttpRequest();
                xhr.open("POST", window.location.href, true);
                xhr.onload = function(e) {
                    if (this.status == 200) {
                        console.log(this.responseText);
                        window.location.reload();
                    }
                };
                xhr.send(form_data); // send the FormData object
            };
        </script>
    </body>
</html>

从javascript访问html表单元素

3 个答案: