上传文件在 Chrome 扩展选项页面中不起作用

Posted 2023-03-14

【中文标题】上传文件在 Chrome 扩展选项页面中不起作用

【英文标题】：Upload file not working in Chrome extension option page

【发布时间】：2013-10-13 18:21:23

【问题描述】：

我正在开发一个带有选项页面的 chrome 扩展。在该页面上，我放置了一个上传图片选项，但无法在 javascript 中加载文件。我尝试了许多解决方案（1st solution、2nd solution ...），但没有一个奏效。奇怪的是，即使是 html 代码中的“onclick”属性也不会调用相应的函数。下面是代码示例：

HTML 示例：

<input type="file" name="uploadImage" id="uploadImage" />
<button type="submit" id="imageUpload-btn" onclick="myFunction();">Upload</button>

javascript 示例：

jQuery("#imageUpload-btn").click(function()
    var image = new Image();
    image.src = jQuery("#uploadImage").val();
    alert(image.src);
    image.onload = function()
        alert("on load");
    
    image.onerror = function()
        alert("error");
    
);

我在第一个警报中获得了文件的路径，但之后总是错误警报。函数“myFunction()”没有被调用，但如果我直接在浏览器中打开文件，“onclick”触发器就会起作用，并且会调用“myFunction()”。

我做错了什么或者我错过了什么？

【问题讨论】：

文件输入的值不是文件的实际路径（由于浏览器安全性）。你打算通过 ajax 上传这张图片吗？

如果可能的话，我想只用 javascript 上传它并将其保存在 chrome.storage 中。我尝试了一个代码，该代码将图像存储在 localStorage 中（html5，我认为它是来自此页面 link 的那个），但它在 chrome 扩展的选项页面中不起作用，但如果我打开option.html 文件直接在浏览器中它工作正常。它必须与

有关

【参考方案1】：

<form name="Upload" action="#" enctype="multipart/form-data" method="post">
   <p>Filename: <INPUT type="file" name="submitfile" id = "submitfile" />
   <INPUT type="button" value="Send" onClick="checkSize();" />
   </form>

你在这里使用enctype="multipart/form-data"这种类型我们没有使用权限

 im.src = document.getElementById('submitfile').value;

你需要去 apache.commons.fileupload ServletFileUpload.isMultipartContent(request); 这完全是 java 相关的。

【讨论】：

谢谢，但我知道如何制作表单并使用服务器端代码（php、JSP、...）来获取 POST 或 GET 操作，但我需要带有 javascript 的浏览器端代码，因为我没有服务器，需要在浏览器端上传。