在js中使用XMLHTTPREQUEST發送base64圖像數據“ POST”

Question

我正在嘗試將base64數據發布到服務器，但是我收到一個錯誤“ Microsoft JScript運行時錯誤：無法獲取屬性'addEventListener'的值：對象為null或未定義”，在下面我附上了錯誤屏幕快照的任何幫助。

            var imagefile = canvas.toDataURL("image/png");
            imagefile = imagefile.replace("data:image/png;base64,", "");
            var oXHR = new XMLHttpRequest();
            oXHR.upload.addEventListener('loadstart', uploadFinish, false);
            oXHR.upload.addEventListener('progress', uploadProgress, false);
            oXHR.upload.addEventListener('error', uploaderror, false);
            oXHR.open('POST',"http://demo.donelook.com/eyewearweb/levellens.aspx",true);
            oXHR.send(imagefile);

Answer 1

我想你要：

oXHR.addEventListener('loadstart', uploadFinish, false);

Answer 2

oXHR.upload.addEventListener有一個錯誤，應該是oXHR.addEventListener 。 另一個問題是並非所有瀏覽器都支持addEventListener 。 如果您使用的是純JavaScript，則必須執行以下操作。

if (!oXHR.addEventListener) {
    oXHR.attachEvent("loadstart", uploadFinish);
}
else {
    oXHR.addEventListener("loadstart", uploadFinish, false);
}

您可以將其編寫為單獨的函數，然后重新使用以確保瀏覽器的兼容性。 像這樣：

function addEventListener(element,type, listener, useCapture){
     if (!element.addEventListener) {
        element.attachEvent(type, listener);
     }
     else {
        element.addEventListener(type, listener, useCapture);
     }
}

您的代碼：

var imagefile = canvas.toDataURL("image/png");
 imagefile = imagefile.replace("data:image/png;base64,", "");
 var oXHR = new XMLHttpRequest();
 addEventListener(oXHR,'loadstart', uploadFinish, false);
 addEventListener(oXHR,'progress', uploadProgress, false);
 addEventListener(oXHR,'error', uploaderror, false);
 oXHR.open('POST',"http://demo.donelook.com/eyewearweb/levellens.aspx",true);
 oXHR.send(imagefile);