XMLHttpRequest的readystatechange事件未触发问题求助

Hey there! Let's work through why your readystatechange event isn't firing when your wysiwyg editor automatically uploads dragged images. Here are the most likely issues and fixes to test:

Common Causes & Troubleshooting Steps #

• The editor might be using fetch instead of XMLHttpRequest
  Many modern wysiwyg tools have switched to the Fetch API for async requests, which your current code doesn't intercept. Pop open your browser's DevTools Network tab: check the "Type" column for the image upload request—if it says "fetch" instead of "xhr", that's the problem. You'd need to wrap the fetch method instead to hook into those requests.

• Your status code check is too strict
  You’re only listening for status == 200, but successful uploads often return other 2xx codes (like 201 Created for new resources, or 204 No Content). Try loosening the condition to catch all successful responses:

  if (realXHR.readyState == 4 && realXHR.status >= 200 && realXHR.status < 300) {
    console.log('done');
  }
  

  Add logging for failed requests too, to rule out errors:

  if (realXHR.readyState == 4) {
    if (realXHR.status >= 200 && realXHR.status < 300) {
      console.log('done');
    } else {
      console.log('Request failed:', realXHR.status, realXHR.statusText);
    }
  }
  

• Your XHR override runs too late
  If the wysiwyg editor initializes its XHR logic before your script runs, it’ll use the native XMLHttpRequest instead of your wrapped version. Make sure your script loads and executes before the editor's initialization script—for example, move your <script> tag to the <head> section, or ensure it's the first script to run on the DOMContentLoaded event.

• The editor uses a wrapped XHR library
  Some editors rely on third-party libraries (like Axios) or their own internal XHR wrappers instead of the native window.XMLHttpRequest. Check the "Initiator" column in the Network tab to see which script triggers the upload—if it’s a library, your override won’t catch it. In this case, look for editor-specific upload completion hooks (most wysiwygs have built-in events for this!) instead of intercepting XHR globally.

• CORS errors or network failures
  If the upload fails entirely (e.g., CORS issues, server errors), readyState will still hit 4, but the status code will be 4xx or 5xx. The logging we added earlier will help you spot this right away.

Quick Debugging Tip #

First, add a log to confirm your XHR override is actually being used:

function newXHR() {
  console.log('Custom XHR created!'); // Add this line
  var realXHR = new oldXHR();
  // ... rest of your code
}

If you don’t see this log when the image upload happens, your override isn’t being picked up—go back to checking load order or if the editor uses fetch/another library.

内容的提问来源于stack exchange，提问作者Jason Howard