怎么用ajax实现上传文件的功能

HTTP File Server

http-file-server 是用 python 实现的 HTTP 文件服务器，支持上传和下载文件。

运行

$ python file-server.py files 8001

其中第一个参数 files 是存放文件的路径，第二个参数 8001 是 HTTP 服务器端口。

接口

1. 读取文件

GET /pathtofile/filename

2. 读取文件夹下所有文件（已经忽略隐藏文件）

GET /path

返回文件列表为 JSON 数组，文件名末尾带有 / 的表示是文件夹。 filename 为文件名，mtime 为修改时间。如茄

[{"filename":"f1.txt","mtime":1001},{"filename":"p3/","mtime":1002}]

3. 上传文件

采用 POST 方式上传文件空拆，URL 参数中传参数 name 表示上传的文件名，POST 内容斗橡枣为文件内容。

POST /upload?name=filename

ajax 示例:

// file is a FileReader object

var data = file.readAsArrayBuffer()

var xhr = new XMLHttpRequest()

var url = "http://localhost:8001/upload?name=xxx.md"

xhr.open("post", url, true)

xhr.setRequestHeader("Accept", "application/json, text/javascript, */*q=0.01")

xhr.onreadystatechange = function() {

if (xhr.readyState==4 &&xhr.status==200)

{

console.log(xhr.responseText)

}

}

xhr.send(data)

文件名 filename 可以包含相对路径。比如：upload?name=md/xxx.md。则上传至 md 目录下。

<script type="text/javascript">

$("a").click(function () {

var href = this

var url = href.href

var name = href.innerHTML

if (url.indexOf("kindeditor") >= 0) {

download(url, name)

return false

}

})

/**

* 下载

* @param  {String} url 目标文件地址

* @param  {String} filename 想要保存中握的文件名称

*/

function download(url, filename) {

getBlob(url, function (blob) {

saveAs(blob, filename)

})

}

/**

* 获取 blob

* @param  {String} url 目标文件地址

* @return {cb}

*/

function getBlob(url, cb) {

var xhr = new XMLHttpRequest()

xhr.open('GET', url, true)

xhr.responseType = '袜培隐告厅blob'

xhr.onload = function () {

if (xhr.status === 200) {

cb(xhr.response)

}

}

xhr.send()

}

/**

* 保存

* @param  {Blob} blob   

* @param  {String} filename 想要保存的文件名称

*/

function saveAs(blob, filename) {

if (window.navigator.msSaveOrOpenBlob) {

navigator.msSaveBlob(blob, filename)

} else {

var link = document.createElement('a')

var body = document.querySelector('body')

link.href = window.URL.createObjectURL(blob)

link.download = filename

// fix Firefox

link.style.display = 'none'

body.appendChild(link)

link.click()

body.removeChild(link)

window.URL.revokeObjectURL(link.href)

}

}

</script>

---