Question

我有一个表单，我正在尝试上传文件，但我必须让文件上传它但我无法这样做，因为我收到此错误

main.js：5未捕获的TypeError：无法读取null的属性'value'

function upload() {
    var data = new XMLHttpRequest();
    var url = "includes/upload.php";
    var file = document.getElementById("filename").value;
    var image = document.getElementById("image").value;
    var span = document.querySelector('#uploadPreview[style]'),
        a = window.getComputedStyle(span, null).transform,
        b = window.getComputedStyle(span, null).transformOrigin;
    val = 'transform:' + a + ';transform-origin:' + b + ';backface-visibility: hidden;';

    var vars = "style=" + val + "&image=" + image + "&filename=" + file;

    data.open("POST", url, true);
    data.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    data.onreadystatechange = function() {
        if (data.readyState == 4 && data.status == 200) {
            var return_data = data.responseText;
            document.getElementById("comment_box").innerHTML = return_data;
        }
    }

    data.send(vars);
}

我的HTML代码：

<form method="POST" enctype="multipart/form-data" style="text-align:center;">
    <input id="uploadImage" type="file" id="image" name="image" style="margin:auto;" />
    <input type="hidden" id="x" name="x" />
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <input type="hidden" id="filename" name="filename" value="<?php if(!empty($data['profile_pic'])) { echo $data['profile_pic'];} ?>" />
    <button type="button" name="update_picture" class="btn_form" onclick="upload();">Update Picture</button>
</form>

Answer 1

这里有2个ID：

 <input id="uploadImage" type="file" id="image" name="image" style="margin:auto;" />

尝试只使用一个ID。

你不能同时拥有这两个，你可以参考这个问题here。

输入类型文件的未捕获类型错误

1 个答案: