2016-05-13 137 views
0

我有一个表格,我要上传的文件,但我得要上传的文件,但我不能这样做,因为我得到这个错误未捕获的类型错误

main.js:5 Uncaught TypeError: Cannot read property 'value' of null

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> 
+0

你的main.js脚本中的剂量线71包含什么?如果可能请提供JSFiddle。 –

+0

var image = document.getElementById(“uploadImage”)。value; –

+0

其实我只是注意到在你的html中有一个重复的id,你不能这样做 –

回答

0

你有2点ID的位置:

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

尝试仅使用一个ID。

你不能都有,你可以参考这个问题here