使用 javascript 将 png 上传到 imgur
我正在尝试使用 Javascript 将 png 上传到 imgur。我直接使用了 Imgur API example 中的代码，但我认为我没有正确传递 png 文件，因为我收到一条错误消息，指出 file.type is undefined。我认为这个文件没问题，因为我已经用几个不同的 png 尝试过了。我的代码如下：
<html>
<head>
<script type="text/javascript">
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
// Big win!
// The URL of the image is:
JSON.parse(xhr.responseText).upload.links.imgur_page;
}
// Ok, I don't handle the errors. An exercice for the reader.
// And now, we send the formdata
xhr.send(fd);
}
</script>
</head>
<body>
<button type="button" onclick="upload('test.png')">upload to imgur</button>
</body>
</html>
png 文件 test.png 与我的 html 文件存储在同一目录中。
I'm trying to use Javascript to upload a png to imgur. I've used the code directly from the Imgur API example, but I don't think I am passing the png file properly as I get an error message saying file.type is undefined. I think the file is ok as I've tried this with a few different pngs. My code is as follows:
<html>
<head>
<script type="text/javascript">
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
// Big win!
// The URL of the image is:
JSON.parse(xhr.responseText).upload.links.imgur_page;
}
// Ok, I don't handle the errors. An exercice for the reader.
// And now, we send the formdata
xhr.send(fd);
}
</script>
</head>
<body>
<button type="button" onclick="upload('test.png')">upload to imgur</button>
</body>
</html>
The png file test.png is stored in the same directory as my html file.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
该文件必须是使用 HTML5 fileAPI 创建的
File对象，您不能只给它一个文件名并期望它能够工作。Javascript 无法访问文件系统，它只能访问通过拖放或文件输入提供给它的文件。
The file has to be a
Fileobject created with the HTML5 fileAPI, you can't just give it a file name and expect it to work.Javascript has no access to the filesystem, it can only access files that are given to it using either drag and drop or a file input.
您使用的示例期望您使用输入元素（类型=文件）上传一些图像。尝试此示例。您可以使用 Canvas 像这样访问图像数据。
总而言之，您需要执行以下操作：
The example you are using expects that you use input element (type=file) to upload some image. Try this example. You can access image data using a Canvas like this.
To summarize, you'll need to do this: