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 目录下。
jquery 实现多个上传文件教程：首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
1
2
3
4
5
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、页面的基本代码如下
这里用的是aspx页面(html也是也可的)
页面中引入的js和js函数如下：
1
2
3
4
5
6
7
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
</script>
js函数：
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
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader': 'image/uploadify.swf', //uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框
'script': 'Handler1.ashx',//script ： 后台处理程序的相对路径
'cancelImg': 'image/cancel.png',
'buttenText': '请选择文件',//浏览按钮的文本，默认值：BROWSE。
'sizeLimit':999999999,//文件大小显示
'floder': 'Uploader',//上传文件存放的目录
'queueID': 'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致
'queueSizeLimit': 120,//上传文件个数限制
'progressData': 'speed',//上传速度显示
'auto': false,//是否自动上传
'multi': true,//是否多文件上传
//'onSelect': function (e, queueId, fileObj) {
//alert("唯一标识:" + queueId + "\r\n" +
// "文件名：" + fileObj.name + "\r\n" +
// "文件大小：" + fileObj.size + "\r\n" +
// "创建时间：" + fileObj.creationDate + "\r\n" +
// "最后修改时间：" + fileObj.modificationDate + "\r\n" +
// "文件类型：" + fileObj.type)
//}
'onQueueComplete': function (queueData) {
alert("文件上传成功！")
return
}
})
})
页面中的控件代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<form id="form1" runat="server">
<div id="fileQueue">
</div>
<div>
<p>
<input type="file" name="uploadify" id="uploadify"/>
<input id="Button1" type="button" value="上传" onclick="javascript: $('#uploadify').uploadifyUpload()" />
<input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()" />
</p>
</div>
</form>
</body>
函数主要参数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
$('#fileInput1').fileUpload({
'uploader': 'uploader.swf',//不多讲了
'script': '/AjaxByJQuery/file.do',//处理Action
'cancelImg': 'cancel.png',
'folder': '',//服务端默认保存路径
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]
'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下
//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子
'multi':'true',//多文件上传开关
'fileExt':'*.xls*.csv',//文件过滤器
'fileDesc':'.xls',//文件过滤器 详解见文档
'onComplete' : function(event,queueID,file,serverData,data){
//serverData为服务器端返回的字符串值
alert(serverData)
}
})
})
后台一般处理文件：
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System
using System.Collections.Generic
using System.Linq
using System.IO
using System.Net
using System.Web
using System.Web.Services
namespace fupload
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"
HttpPostedFile file = context.Request.Files["Filedata"]//对客户端文件的访问
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"//服务器端文件保存路径
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath)//创建服务端文件夹
}
file.SaveAs(uploadPath + file.FileName)//保存文件
context.Response.Write("上传成功")
}
else
{
context.Response.Write("0")
}
}
public bool IsReusable
{
get
{
return false
}
}
}
}
以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。
程序说明
使用说明
实例化时，第一个必要参数是file控件对象：
new QuickUpload(file)
第二个可选参数用来设置系统的默认属性，包括
属性: 默认值//说明
parameter: {},//参数对象
action: "",//设置action
timeout: 0,//设置超时(秒为单位)
onReady: function(){},//上传准备时执行
onFinish: function(){},//上传完成时执行
onStop: function(){},//上传停止时执行
onTimeout: function(){}//上传超时时执行
还提供了以下方法：
upload：执行上传 *** 作；
stop：停止上传 *** 作；
dispose：销毁程序。
var QuickUpload = function(file, options) {
this.file = $$(file)
this._sending = false//是否正在上传
this._timer = null//定时器
this._iframe = null//iframe对象
this._form = null//form对象
this._inputs = {}//input对象
this._fFINISH = null//完成执行函数
$$.extend(this, this._setOptions(options))
}
QuickUpload._counter = 1
QuickUpload.prototype = {
//设置默认属性
_setOptions: function(options) {
this.options = {//默认值
action: "",//设置action
timeout: 0,//设置超时(秒为单位)
parameter: {},//参数对象
onReady: function(){},//上传准备时执行
onFinish: function(){},//上传完成时执行
onStop: function(){},//上传停止时执行
onTimeout: function(){}//上传超时时执行
}
return $$.extend(this.options, options || {})
},
//上传文件
upload: function() {
//停止上一次上传
this.stop()
//没有文件返回
if ( !this.file || !this.file.value ) return
//可能在onReady中修改相关属性所以放前面
this.onReady()
//设置iframe,form和表单控件
this._setIframe()
this._setForm()
this._setInput()
//设置超时
if ( this.timeout > 0 ) {
this._timer = setTimeout( $$F.bind(this._timeout, this), this.timeout * 1000 )
}
//开始上传
this._form.submit()
this._sending = true
},
//设置iframe
_setIframe: function() {
if ( !this._iframe ) {
//创建iframe
var iframename = "QUICKUPLOAD_" + QuickUpload._counter++,
iframe = document.createElement( $$B.ie ? "<iframe name=\"" + iframename + "\">" : "iframe")
iframe.name = iframename
iframe.style.display = "none"
//记录完成程序方便移除
var finish = this._fFINISH = $$F.bind(this._finish, this)
//iframe加载完后执行完成程序
if ( $$B.ie ) {
iframe.attachEvent( "onload", finish )
} else {
iframe.onload = $$B.opera ? function(){ this.onload = finish } : finish
}
//插入body
var body = document.body body.insertBefore( iframe, body.childNodes[0] )
this._iframe = iframe
}
},
//设置form
_setForm: function() {
if ( !this._form ) {
var form = document.createElement('form'), file = this.file
//设置属性
$$.extend(form, {
target: this._iframe.name, method: "post", encoding: "multipart/form-data"
})
//设置样式
$$D.setStyle(form, {
padding: 0, margin: 0, border: 0,
backgroundColor: "transparent", display: "inline"
})
//提交前去掉form
file.form && $$E.addEvent(file.form, "submit", $$F.bind(this.dispose, this))
//插入form
file.parentNode.insertBefore(form, file).appendChild(file)
this._form = form
}
//action可能会修改
this._form.action = this.action
},
//设置input
_setInput: function() {
var form = this._form, oldInputs = this._inputs, newInputs = {}, name
//设置input
for ( name in this.parameter ) {
var input = form[name]
if ( !input ) {
//如果没有对应input新建一个
input = document.createElement("input")
input.name = name input.type = "hidden"
form.appendChild(input)
}
input.value = this.parameter[name]
//记录当前input
newInputs[name] = input
//删除已有记录
delete oldInputs[name]
}
//移除无用input
for ( name in oldInputs ) { form.removeChild( oldInputs[name] ) }
//保存当前input
this._inputs = newInputs
},
//停止上传
stop: function() {
if ( this._sending ) {
this._sending = false
clearTimeout(this._timer)
//重置iframe
if ( $$B.opera ) {//opera通过设置src会有问题
this._removeIframe()
} else {
this._iframe.src = ""
}
this.onStop()
}
},
//销毁程序
dispose: function() {
this._sending = false
clearTimeout(this._timer)
//清除iframe
if ( $$B.firefox ) {
setTimeout($$F.bind(this._removeIframe, this), 0)
} else {
this._removeIframe()
}
//清除form
this._removeForm()
//清除dom关联
this._inputs = this._fFINISH = this.file = null
},
//清除iframe
_removeIframe: function() {
if ( this._iframe ) {
var iframe = this._iframe
$$B.ie ? iframe.detachEvent( "onload", this._fFINISH ) : ( iframe.onload = null )
document.body.removeChild(iframe) this._iframe = null
}
},
//清除form
_removeForm: function() {
if ( this._form ) {
var form = this._form, parent = form.parentNode
if ( parent ) {
parent.insertBefore(this.file, form) parent.removeChild(form)
}
this._form = this._inputs = null
}
},
//超时函数
_timeout: function() {
if ( this._sending ) { this._sending = false this.stop() this.onTimeout() }
},
//完成函数
_finish: function() {
if ( this._sending ) { this._sending = false this.onFinish(this._iframe) }
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）