1
我正在创建一个允许用户上传图像并提交表单的简单表单。表单数据上传到谷歌电子表格。为了图像填充在谷歌电子表格中,我需要图像拥有自己的网址。我正在测试imgur的API,并且通过以下步骤可以很好地工作:https://hacks.mozilla.org/2011/03/the-shortest-image-uploader-ever/。使用生成的链接URL填充文本字段
现在,我的表单为该特定图像生成了一个网址,如何使用该网址填充我的Google电子表格?我正在考虑使用一个文本框,它会在生成时自动填充href,但我不知道该怎么做。
在imgur的API生成链接后,是否有更简单的方法将链接粘贴到我的电子表格中?
我在这里包含了一个工作演示。
function upload(file) {
/* Is the file an image? */
if (!file || !file.type.match(/image.*/)) return;
/* It is! */
document.body.className = "uploading";
/* Lets build a FormData object*/
var fd = new FormData();
fd.append("image", file); // Append the file
var xhr = new XMLHttpRequest(); // Create the XHR
xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
xhr.onload = function() {
// Big win!
document.querySelector("#link").href = JSON.parse(xhr.responseText).data.link;
document.body.className = "uploaded";
}
xhr.setRequestHeader('Authorization', 'Client-ID 490be95195679b1'); // Imgur API key here
/* And now, we send the formdata */
xhr.send(fd);
}
#link, p , div {display: none}
.uploading div {display: none}
.uploaded div {display: none}
.uploading p {display: inline}
.uploaded #link {display: inline}
<input type="file" onchange="upload(this.files[0])"><br />
<!-- this is the text box we could paste the url in -->
<input tyle="text">
<p>Uploading...</p>
<a id="link">Link to imgur file</a>
这工作!谢谢! – cgrouge
有没有什么办法可以让
上传...
它自己的类,并且在上传时还是会出现加载和消失的情况?我不想隐藏所有p标签,因为它会隐藏我页面中的其他信息。 – cgrouge另外,如何使这项工作为两个单独的文件输入? – cgrouge