最短的图片上载工具

仅仅几行JavaScript代码，就可以实现这个超精干的图片上载工具。

这是一个基于imgur.com API的图片上载器。如果你想实现更多的功能，如改变大小、剪切、绘图、色彩调整等等，你可以查看这个之前写的文章。
回到正题。我已经和Imgur.com的创始人打了个招呼（嗨，Alan！）。他最近在他的图片分享网站上增加了拖拽支持。并且，Alan允许Cross-Domain XMLHttpRequest（谢谢！）。所以基本上你可以在你的网站上完全不依赖于服务器端代码处理，而仅仅是使用它提供的API来上载图片到他的网站。

这里是一个例子，来展示如何使用他的API：

（查看完整的代码github—效果展示点这里 ）

（当然，你也需要理解FormData，请看这里）

function upload(file) {

  // 文件来自<input>标签或者拖拽
  // 这货是图片吗？

  if (!file || !file.type.match(/image.*/)) return;

  // 没错，这货就是图片！
  // 现在让我们来建立一个FormData对象

  var fd = new FormData();
  fd.append("image", file); // 添加文件
  fd.append("key", "6528448c258cff474ca9701c5bab6927");
  // 获取你自己的Key：http://api.imgur.com/

  // 创建XHR（Cross-Domain XHR 太给力了！！！）
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://api.imgur.com/2/upload.json"); // 轰隆隆！
  xhr.onload = function() {
    // 大胜利！
    // 图片的网址是：
    JSON.parse(xhr.responseText).upload.links.imgur_page;
   }
   // 嗯，我没有处理错误，给读者个练习。
   // 现在，我们可以发送formdata了
   xhr.send(fd);
 }

以上。

Chrome、Firefox 4上均工作正常。

【原文作者：Paul Rouget 】

分类：Mozilla

标签：,

读者回应

  1. blue1060 2012年3月27日 12:37 上午 #

    hi 你好，我是个电脑白痴，想学习下。
    请问这些数据码是不是复制后再粘贴就可以了吗？那得粘贴在哪里呢？

    谢谢指教

    回复

对此文章发表回复