用生成的链接url填充文本字段
Populate text field with generated link url
我正在创建一个简单的表单,允许用户上传图像并提交表单。表单数据被上传到google电子表格中。为了使图像在谷歌电子表格上填充,我需要图像有自己的url。我正在测试imgur的API,它按照下面的步骤运行得很好:https://hacks.mozilla.org/2011/03/the-shortest-image-uploader-ever/.
现在,我的表单为特定的图像生成了一个url,我如何用这个url填充我的谷歌电子表格?我正在考虑使用一个文本框,将自动填充生成时的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>
这会用url
填充你的文本框document.getElementById("urlText").value = JSON.parse(xhr.responseText).data.link;
<input type="text" id="urlText" name="urlText">
完整代码:
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";
document.getElementById("urlText").value = JSON.parse(xhr.responseText).data.link;
}
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 />
<input type="text" id="urlText" name="urlText">
<p>Uploading...</p>
<a id="link">Link to imgur file</a>
相关文章:
- 使用JSON文件中的变量(字符串)填充文本区域
- JavaScript在其他页面上用html内容填充文本框
- 如何制作每次填充文本框时都会填充的进度条
- 使用两个下拉列表的值填充文本框
- 编辑后无法用Javascript填充文本框
- HTML5使用Javascript填充文本标记的有效方式
- 填充文本框取决于php中的下拉选择
- html5具有特定alpha的画布填充文本和具有不同alpha的背景
- 如何从选定的组合框中填充文本框
- 点击剑道网格的编辑,在剑道窗口中填充文本框/DDL
- 有没有一种方法可以用包含ENTER键换行符的SQL数据填充文本区域表单
- 从下拉框中获取选定的值,并使用来填充文本框php javascript
- 使用带有数据库信息的下拉菜单填充文本框
- 使用php创建的下拉列表中的选择单独填充文本区域
- 使用JavaScript返回click-li项目的值,并用结果填充文本区域
- 用数字而不是文本填充文本框值
- 使用表单按钮填充文本输入
- 在模式窗口中填充文本区域
- 填充文本不起作用
- 我正在用来自选择的数据填充文本框,它可以工作,但是