看到小夜MM,在论坛放了那么好的图片站源码还有数据包,嘿嘿嘿,刚好之前有做图片站的打算,所以准备了一个域名,那就偷偷的自己也弄一个,就传到 Godaddy.com 的免费空间中,反正现在也没广告了,10G 空间 300G 流量,够够用的了。程序只有 8M 多,挺好弄的,很快 FTP 就传好了,但是数据咋办呢,1.4G 的数据,VPS wget 直接拖下来也就几十分钟,但是上传咋办呢?不好弄啊,FTP 也不行,先下载到本地,再 FTP 那几十 KB 的速度上传,不累死才怪。况且有 VPS 呢,国外对国外不是更快么。

那么说干就干。也就是今天的用 SSH 登录远程服务器 A,然后在服务器 A 上的终端,通过命令行来使用 FTP 命令,将上传文件到 B 服务器。

具体步骤如下:

1. ,首先用 cd 命令,进入要上传的文件所在的目录,然后在终端中输入

1
ftp

即可变为 FTP 操作环境
终端显示为,此为 ftp 操作环境标志。

1
ftp>

2. 然后输入要登录的远端服务器地址,ip 和域名都行

1
ftp> open yimity.com

3. 然后终端就会有如下显示(IP 时间等,还有其他的有可能不同,差不多即可)

1
2
3
4
5
6
7
Connected to yimity.com (173.248.187.5).
220---------- Welcome to Pure-FTPd [privsep] [TLS] ----------
220-You are user number 5 of 50 allowed.
220-Local time is now 08:52. Server port: 21.
220-IPv6 connections are also welcome on this server.
220 You will be disconnected after 3 minutes of inactivity.
Name (yimity.com:root):  然后这里输入 FTP 用户名

4. 接下来就是输入密码

1
2
331 User yimity OK. Password required
Password:  这里输入密码,输入过程中不会有任何显示,但其实已经输入了。

5. 然后如果密码正确,就会有如下提示

1
2
3
4
5
230-User yimity has group access to: yimity
230 OK. Current restricted directory is /
Remote system type is UNIX.
Using binary mode to transfer files.
ftp>

6. 登录成功后,就可以进行文件传输了。使用 put 命令。

1
ftp>put 0170.tar.gz 0170.tar.gz

put 命令 第一个参数是本地文件的文件名,第二个参数是远程文件的文件名。

1
ftp>put 0170.tar.gz /wp-content/uploads/0170.tar.gz

put 命令 第一个参数是本地文件的文件名,第二个参数是远程文件的文件名,前面加了存储的路径。

7. 退出

1
ftp>exit

就会退回到 VPS 终端操作环境。

FileReader 对象被用来,通过浏览器来读取文件数据,在上篇文章中,讨论了可以使用 FileReader 用多种格式来方便的读取文件数据,在很多方面,FileReader 和 XMLHttpRequest 非常类似。

Progress events (进度事件)

实际上,Progress 事件是一个单独定义的很普通的规范,这些事件被定义来大概的显示数据传输的进度,例如,当从服务器传送数据开始发生的时候,同样的可以是FileReader 对象开始从磁盘读取数据事件发生的时候。

总共有六个事件:

1
2
3
4
5
6
loadstart – 当加载数据开始的时候,此事件通常都是使用在整个过程的最开始。
progress – 当数据读取的时候,可以获得数据读取进度。
error – 当数据加载失败的时候。
abort – 当数据加载被 abort() 方法取消的时候,(在 FileReader 和 XMLHttpRequest 都可用)。
load – 当所有数据都被成功加载的时候。
loadend – 当数据完成传输的时候,一般情况下,都是在出错,取消,或者成功加载后。所以其不区分成功与否。只要过程完成就好。

error 和 load 已经在上篇文章中讨论过了,这里将讨论其他的一些事件。

跟踪进度

当想要知道文件的读取进度的时候,就应该使用 progress 事件,此事件对象,包含了三个属性,来表示文件开始传输之后的状态。

1
2
3
4
lengthComputable ─ true或者false,表示请求数据的大小是否已知。
loaded ─ 目前接收到的字节数。
total ─ 整个请求中期望传输的字节数。
注意:当lengthComputable为false时,total属性值为0。loadstart事件只会被激发一次。在loadstart之后,进度事件可能被激发0次或多次。

这些数据的作用是可以使 进度条(progress Html5)使用 progress 事件的信息进行进度展示。例如使用 Html5 的 progress 标签来展示数据读取进度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var reader = new FileReader(),
     progressNode = document.getElementById("my-progress");
 
reader.onprogress = function(event) {
    if (event.lengthComputable) {
        progressNode.max = event.total;
        progressNode.value = event.loaded;
    }
};
 
reader.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;
 
    if (error != null) {
        console.error("File could not be read! Code " + error.code);
    } else {
        progressNode.max = 1;
        progressNode.value = 1;
        console.log("Contents: " + contents);
    }
};
 
reader.readAsText(file);

相同的例子就是 Gmail 使用的拖拽上传,当把文件拖拽到 Gmail 里之后,就会立即出现进度条,显示上传进度。

处理错误

虽然是从本地上传文件,但有时候还是会失败。File API 定义了四种错误类型。

1
2
3
4
NotFoundError – 找不到文件。
SecurityError – 文件本身或者读取存在危险,一般情况下,如果读取此文件是危险的或者已经读取了太多次此文件,就会出现该错误。
NotReadableError – 文件存在,但是没有权限读取。
EncodingError – 编码错误,只要是作为 data URI 读取的时候,读取结果的长度超过了浏览器支持的最大长度。

当读取文件时有错误发生时,FileReader 对象的错误属性,就会成为上面提到的一个错误类型的一个实例。在规范中,浏览器都会用一个代码表明错误的属性和值。

1
2
3
4
5
FileError.NOT_FOUND_ERR -- NotFoundError.
FileError.SECURITY_ERR -- SecurityError.
FileError.NOT_READABLE_ERR -- NotReadableError.
FileError.ENCODING_ERR for -- EncodingError .
FileError.ABORT_ERR -- 当 abort() 方法调用的时候。

可以通过下面的代码测试不同的错误:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var reader = new FileReader();
 
reader.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;
 
    if (error != null) {
        switch (error.code) {
            case error.ENCODING_ERR:
                console.error("Encoding error!");
                break;
 
            case error.NOT_FOUND_ERR:
                console.error("File not found!");
                break;
 
            case error.NOT_READABLE_ERR:
                console.error("File could not be read!");
                break;
 
            case error.SECURITY_ERR:
                console.error("Security issue with file!");
                break;
 
            default:
                console.error("I have no idea what's wrong!");
        }
    } else {
        progressNode.max = 1;
        progressNode.value = 1;
        console.log("Contents: " + contents);
    }
};
 
reader.readAsText(file);

下节

FileReader 对象有很多的功能的对象的集合,大部分都和 XMLHttpRequest 类似。通过这三篇文章,应该能够通过 javascript 读取文件并把文件发送到服务器了。 但是 File API 系统,要比上面这三篇文章讲到的多得多,下篇文章将会有更给力的功能来进行讨论。

上篇文章,简述了使用 javascript 对于文件上传的一些操作,例如,当用户想要上传,或者拖拽上传文件的时候。如何获得文件对象。那么,这篇文章,将简单的讲述一些读取文件数据的操作。

FileReader

FileReader 只有一个功能,那就是读取文件数据并且将其存储在 javascript 变量中,此 API 专门被设计成模拟(类似) XMLHttpRequest 操作,因为它们两个都是从外部资源加载数据(不包括浏览器)。并且此 API 被设计成异步的(asynchronously),所以不会引起浏览器的锁死。

FileReader 可以将数据读取成各种格式,而且在读取数据的时候,必须要求使用这几种格式,这几种格式如下,必须通过调用这几种格式才能读取数据。

1
2
3
4
readAsText() – 返回文本数据(text/plain)。
readAsBinaryString() – 返回此文件被编码的二进制数据 (已弃用– 使用 readAsArrayBuffer() 代替)。
readAsArrayBuffer() – 返回此文件的一个ArrayBuffer(二进制数据缓冲)(适合二进制数据,例如图像文件)数据。
readAsDataURL() – 返回此文件的 <a href="http://en.wikipedia.org/wiki/Data_URI_scheme" title="Data URI scheme" target="_blank">data URL</a>

没中方法都初始化一个文件读取动作,类似于 XHR 对象的 send() 方法初始化一个 http 请求。所以,必须对此绑定一些事件来监听文件读取的发生,例如 load 事件,表示文件读取完成,代码如下:

1
2
3
4
5
6
7
8
9
10
11
var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    console.log("File contents: " + contents);
};//文件读取完成
 
reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};//文件读取错误
 
reader.readAsText(file);//以文本方式读取

此代码主要是通过文本(text/plain)凡是来读取数据,并将其在 控制台(console) 显示,当文件被成功读取,onload 事件触发,当文件读取出错, onerror 事件触发,在事件内部,FileReader 的实例,应该使用 event.target 而不是直接使用保存 reader 的变量,读取文件成功时, result 属性保存文件内容,读取文件失败时, result 属性保存错误信息。

使用 data URIs 读取数据

稍微改变一下上面的代码,就可以实现使用 data URIs/data URLs 读取数据,尤其是从本地读取比较小的图片,读取并且在浏览器中显示,是非常便利的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var reader = new FileReader();
reader.onload = function(event) {//成功读取
    var dataUri = event.target.result,//数据内容
        img     = document.createElement("img");//创建一个 img 对象
 
    img.src = dataUri; //设置 img 对象的 src 属性值为 dataUri
    document.body.appendChild(img);//将 img 插入到 body 中
};
 
reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};//读取文件错误是发生
 
reader.readAsDataURL(file);// 以 data url 方式读取数据

此代码将图片从本地以 data url 方式读取后,存入 img 对象的 src 属性中,然后直接在页面显示,如果可以,你可以直接将此图片放到页面上进行处理,不过要使用 <canvas> 才行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
    img     = new Image();
    img.onload = function() {// 等待图像文件被加载完
        canvas.drawImage(img, 100, 100);
    };
    img.src = dataUri;
};
 
reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

此代码将图像文件加载完成之后,放到一个 canvas 画布中进行处理。

以 ArrayBuffers 方式读取

ArrayBuffer 最初是作为 WebGL 的一部分的,ArrayBuffer 代表一个可以存储任意任意大小的数字的一个有限的区域,此种方式读取的数据,必须使用特殊的方式访问,例如 Int8Array ,将此底层的数据视为 8 位的符号整数。或者 Float32Array 将其视为 32 位的浮点数,这些都被叫做类型化数组/格式化数组,都被强制的使用某种数据格式来使用,而不像普通格式的数据那样。

ArrayBuffer 主要用来处理二进制数据文件,已能够对数据具有更细粒度的控制,并且远远超出此篇文章解释的范围。反正在使用的时候,只要记住,你可以很简单的将一个文件读取为二进制缓冲,并且可以简单地将此数据通过 XHR 的 send() 方法发送给后端服务器(当然了,你必须从服务器上接受此二进制缓冲,并且重建此文件),但是浏览器还必须完整的支持 XMLHttpRequest Level 2,不过可惜的是,只有 IE10 以上的现代浏览器才支持。

预告
FileReader 的使用很简单,但是,如果你知道如何使用 XMLHttpRequest 的话,没有理由你不会用这种方式读取文件,下节,将介绍更多的关于 FileReader 的事件,和更多可能的错误。

使用 javascript 来操作文件,是严格被禁止的,因为你不想一打开网页,硬盘灯就狂闪,然后把你硬盘的文件/列表都慢慢的上传上去,那么你就危险了。所以一般情况下,javascript 操作文件,都是在网页中提供文件上传控件。此时,你需要允许,才会使此网页获得相应的文件的信息。HTML5 以前的文件上传控件,都是以

1
<input type="file">

来进行的,此时,我们会得到关于此文件的一些信息,包括。

1
2
3
name – 文件名
size – 文件大小
type – 文件的 MIME 类型。

而此时你就可以随时访问这些文件的属性而不用直接去操作文件。那么就用正常的表单方式上传就可以了。

获得文件属性

在点击浏览添加完文件之后,就可以使用如下的 javascript 代码来获取相应的文件属性了。此处使用了添加事件(change)的方式,当然一旦选择了文件之后,这些属性随时都可以获得。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
    // 当 control 改变的时候
    var i = 0,
        files = control.files,
        len = files.length;
    for (; i < len; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

当 your-files 这个对象发生改变的时候,就执行下面的代码。

拖动上传/Drag and drop

虽然之前的文件上传方式可以使用,但是总是不人性化,操作起来比较麻烦,而且还不强大。(其实我认为拖动上传也不人性化,最大化浏览器好好地,要上传了,先缩小浏览器窗口,然后在拖动?麻烦不!)
但是拖动上传总有他的优点呢。并且 html5 相对来说,给了上传文件更多的属性和事件。

例如,如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="your-files">&lt;/div>
<script>
var target = document.getElementById("your-files");
 
target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);
 
target.addEventListener("drop", function(event) {
 
    // 阻止浏览器默认动作
    event.preventDefault();
 
    var i = 0,
        files = event.dataTransfer.files,
        len = files.length;
 
    for (; i < len; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
 
}, false);
</script>

当你将文件拖动到 your-files 区域的时候,就可以看到 控制台 里面输出文件的信息了。当然,此时还不能上传。

使用 Ajax 上传

获得此文件以及相应的信息之后,就可以开始上传了。当然这里使用 ajax 方式上传。使用了定义在 XMLHttpRequest Level 2 中的 FormData 对象,可以表示一个 HTML 表单,并且使用“属性:值” 这样的方式,使用 append() 方法来提交表单。

1
2
var form = new FormData();
form.append("name", "Nicholas");

FormData 对象的好处就是可以直接的获取文件内容。并且可以十分有效的模拟一个表单,而你只需要增加一些特别的信息,例如文件名等,其他的浏览器都会自己去做。

1
2
3
4
5
6
7
8
9
10
11
12
// 创建一个有多个数据的表单
var form = new FormData();
form.append("name", "Nicholas");
form.append("photo", control.files[0]);
 
// 通过 XHR 传送,没有传送 header!
var xhr = new XMLHttpRequest();
xhr.onload = function() {
    console.log("Upload complete.");
};
xhr.open("post", "/entrypoint", true);
xhr.send(form);

一旦通过 send() 方法提交表单之后,浏览器就会同时将 header 信息也提交给服务器。所以不用担心文件的编码问题。其实就像原始的表单提交一样,例如此处,对于 php 来说,就可以使用:

1
2
$_POST["name"];
$_POST["photo"];

来获取相应文件的信息了。不过目前只有现代浏览器才支持,例如 IE 要等到 10 才行。

下一节,虽然添加,上传文件很简单,这么点就弄完了,但是如何获取文件数据呢?这就是下节要讨论的了。

一些相关的链接:
File API specification (草案)(英文)
HTML5 Drag and Drop(英文)
XMLHttpRequest Level 2(英文)