Javascript 如何使用java脚本捕获在浏览器中打开的文件并将其发布到后端_Javascript

Javascript 如何使用java脚本捕获在浏览器中打开的文件并将其发布到后端

javascript

Javascript 如何使用java脚本捕获在浏览器中打开的文件并将其发布到后端,javascript,Javascript,我正在编写chrome扩展以捕获在chrome浏览器中打开的文件，就像我选择了在浏览器中打开的pdf一样，我希望使用Web服务将文件保存在我的数据存储中。我的代码如下所示。如何捕获当前的pdf或图像文件并发布到我的Web服务 popup.html <html> <head> <style> body { min-width: 420px; ove

我正在编写chrome扩展以捕获在chrome浏览器中打开的文件，就像我选择了在浏览器中打开的pdf一样，我希望使用Web服务将文件保存在我的数据存储中。我的代码如下所示。如何捕获当前的pdf或图像文件并发布到我的Web服务

popup.html

<html>
    <head>
        <style>
            body { 
                min-width: 420px; 
                overflow-x: hidden; 
                font-family: Arial, sans-serif; 
                font-size: 12px; 
            }
            input, textarea { 
                width: 420px; 
            }
            input#save { 
                font-weight: bold; width: auto; 
            }
        </style>
        <script src="popup.js"></script>
    </head>
    <body>
        <form id="addbookmark">
            <p><label for="username">UserName</label><br />
            <input type="text" id="username" name="username" size="50" value="" /></p>
            <p><label for="password">Password</label><br />
            <input type="password" id="password" name="password" size="50" value="" /></p>

            <p>
                <input id="save" type="submit" value="Save to Store" />
                <span id="status-display"></span>
            </p>
        </form>

    </body>
</html>

popup.js

// Global reference to the status display SPAN
var statusDisplay = null;

// POST the data to the server using XMLHttpRequest
function addBookmark() {

    // Cancel the form submit
    event.preventDefault();

    // The URL to POST our data to
    var postUrl = 'http://mydrive.com';

    // Set up an asynchronous AJAX POST request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', postUrl, false);

    // Prepare the data to be POSTed


    // Set correct header for form data 
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    // Handle request state change events
    xhr.onreadystatechange = function() { 

        // If the request completed
        if (xhr.readyState == 4) {

            statusDisplay.innerHTML = '';
            if (xhr.status == 200) {
                // If it was a success, close the popup after a short delay
                statusDisplay.innerHTML = 'Saved!';
                window.setTimeout(window.close, 1000);
            } else {// Show what went wrong
                statusDisplay.innerHTML = 'Error saving: ' + xhr.statusText;
            }
        }
    };

    // Send the request and set status
    xhr.send(null);
    statusDisplay.innerHTML = 'Saving...';
}

// When the popup HTML has loaded
window.addEventListener('load', function(evt) {
    // Handle the bookmark form submit event with our addBookmark function
    document.getElementById('addbookmark').addEventListener('submit', addBookmark);
    // Cache a reference to the status display SPAN
    statusDisplay = document.getElementById('status-display');
    // Call the getPageInfo function in the background page, injecting content_script.js 
    // into the current HTML page and passing in our onPageInfo function as the callback
  //  chrome.extension.getBackgroundPage().getPageInfo(onPageInfo);
});

文件上传可以在表单提交上完成，而不是通过ajax。。或者使用表单数据对象通过ajax上传。。但是表单数据在旧版本的中不受支持，即这里是我正在尝试的链接chrome@Shashank：您当然可以使用ajax上传文件，xhr.sendinpFiles.files[0]可以正常工作。这是一个让它们看起来像FormData为您整理的传统上载的问题。让我们假设我已经在预览模式下从gmail打开了文件，或者在浏览器中打开了pdf文件如何捕获它？@dandavis好吧，我从来没有使用过xhr.send进行文件上载，所以我不知道无论如何，谢谢，我会尝试一下。。。

// Global reference to the status display SPAN
var statusDisplay = null;

// POST the data to the server using XMLHttpRequest
function addBookmark() {

    // Cancel the form submit
    event.preventDefault();

    // The URL to POST our data to
    var postUrl = 'http://mydrive.com';

    // Set up an asynchronous AJAX POST request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', postUrl, false);

    // Prepare the data to be POSTed


    // Set correct header for form data 
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    // Handle request state change events
    xhr.onreadystatechange = function() { 

        // If the request completed
        if (xhr.readyState == 4) {

            statusDisplay.innerHTML = '';
            if (xhr.status == 200) {
                // If it was a success, close the popup after a short delay
                statusDisplay.innerHTML = 'Saved!';
                window.setTimeout(window.close, 1000);
            } else {// Show what went wrong
                statusDisplay.innerHTML = 'Error saving: ' + xhr.statusText;
            }
        }
    };

    // Send the request and set status
    xhr.send(null);
    statusDisplay.innerHTML = 'Saving...';
}

// When the popup HTML has loaded
window.addEventListener('load', function(evt) {
    // Handle the bookmark form submit event with our addBookmark function
    document.getElementById('addbookmark').addEventListener('submit', addBookmark);
    // Cache a reference to the status display SPAN
    statusDisplay = document.getElementById('status-display');
    // Call the getPageInfo function in the background page, injecting content_script.js 
    // into the current HTML page and passing in our onPageInfo function as the callback
  //  chrome.extension.getBackgroundPage().getPageInfo(onPageInfo);
});