在HTML中使用WCF RESTful上传文件
说明
在html中上传文件时会为文件内容加入一头一尾,使用自带的调试工具可看到请求头中有request payload数据如下所示:
[plain]
-----------------------8cc0b8cfcfd5ed2
content-disposition: form-data; name="file"; filename="item3.xml"
content-type: application/octet-stream
这里是真正的文件内容
-----------------------8cc0b8cfcfd5ed2--
-----------------------8cc0b8cfcfd5ed2
content-disposition: form-data; name="file"; filename="item3.xml"
content-type: application/octet-stream
这里是真正的文件内容
-----------------------8cc0b8cfcfd5ed2--
因此服务端接收后要手动对其作解析。
代码
网页端
[html]
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<meta http-equiv="pragma" content="no-cache" />
<title>测试页</title>
</head>
<body>
文件上传页
<form action="https://localhost:4513/ivisitorrestservice/upload/utf-8" method="post" enctype="multipart/form-data">
<input type="file" name="filecontent" /><!--这里的name属性必须有,否则浏览器不会将其作为表单内容进行提交-->
<input type="submit" />
</form>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<meta http-equiv="pragma" content="no-cache" />
<title>测试页</title>
</head>
<body>
文件上传页
<form action="https://localhost:4513/ivisitorrestservice/upload/utf-8" method="post" enctype="multipart/form-data">
<input type="file" name="filecontent" /><!--这里的name属性必须有,否则浏览器不会将其作为表单内容进行提交-->
<input type="submit" />
</form>
</body>
</html>
服务端
契约
[csharp]
/// <summary>
/// 使用html上传文件
/// </summary>
/// <param name="file">文件流</param>
/// <param name="encodingname">html的文字编码名</param>
[webinvoke(method = "post", uritemplate = "upload/{encodingname}")]
void upload(stream file, string encodingname);
/// <summary>
/// 使用html上传文件
/// </summary>
/// <param name="file">文件流</param>
/// <param name="encodingname">html的文字编码名</param>
[webinvoke(method = "post", uritemplate = "upload/{encodingname}")]
void upload(stream file, string encodingname);
实现
[csharp]
public void upload(stream file, string encodingname)
{
using (var ms = new memorystream())
{
file.copyto(ms);
ms.position = 0;
var encoding = encoding.getencoding(encodingname);
var reader = new streamreader(ms, encoding);
var headerlength = 0l;
//读取第一行
var firstline = reader.readline();
//计算偏移(字符串长度+回车换行2个字符)
headerlength += encoding.getbytes(firstline).longlength + 2;
//读取第二行
var secondline = reader.readline();
//计算偏移(字符串长度+回车换行2个字符)
headerlength += encoding.getbytes(secondline).longlength + 2;
//解析文件名
var filename = new system.text.regularexpressions.regex("filename=\"(?<fn>.*)\"").match(secondline).groups["fn"].value;
//一直读到空行为止
while (true)
{
//读取一行
var line = reader.readline();
//若到头,则直接返回
if (line == null)
break;
//若未到头,则计算偏移(字符串长度+回车换行2个字符)
headerlength += encoding.getbytes(line).longlength + 2;
if (line == "")
break;
}
//设置偏移,以开始读取文件内容
ms.position = headerlength;
////减去末尾的字符串:“\r\n--\r\n”
ms.setlength(ms.length - encoding.getbytes(firstline).longlength - 3 * 2);
using (var filetoupload = new filestream("d:\\fileupload\\" + filename, filemode.create))
{
ms.copyto(filetoupload);
filetoupload.close();
filetoupload.dispose();
}
}
}
public void upload(stream file, string encodingname)
{
using (var ms = new memorystream())
{
file.copyto(ms);
ms.position = 0;
var encoding = encoding.getencoding(encodingname);
var reader = new streamreader(ms, encoding);
var headerlength = 0l;
//读取第一行
var firstline = reader.readline();
//计算偏移(字符串长度+回车换行2个字符)
headerlength += encoding.getbytes(firstline).longlength + 2;
//读取第二行
var secondline = reader.readline();
//计算偏移(字符串长度+回车换行2个字符)
headerlength += encoding.getbytes(secondline).longlength + 2;
//解析文件名
var filename = new system.text.regularexpressions.regex("filename=\"(?<fn>.*)\"").match(secondline).groups["fn"].value;
//一直读到空行为止
while (true)
{
//读取一行
var line = reader.readline();
//若到头,则直接返回
if (line == null)
break;
//若未到头,则计算偏移(字符串长度+回车换行2个字符)
headerlength += encoding.getbytes(line).longlength + 2;
if (line == "")
break;
}
//设置偏移,以开始读取文件内容
ms.position = headerlength;
////减去末尾的字符串:“\r\n--\r\n”
ms.setlength(ms.length - encoding.getbytes(firstline).longlength - 3 * 2);
using (var filetoupload = new filestream("d:\\fileupload\\" + filename, filemode.create))
{
ms.copyto(filetoupload);
filetoupload.close();
filetoupload.dispose();
}
}
}
推荐阅读
-
在HTML中使用WCF RESTful上传文件
-
使用PDF.JS插件在HTML中预览PDF文件的方法
-
在html5中,使用localStorage存储的数据放在哪个文件里?
-
在HTML中使用WCF RESTful上传文件
-
使用PDF.JS插件在HTML中预览PDF文件的方法
-
在html5中,使用localStorage存储的数据放在哪个文件里?
-
在vue中使用quill-editor富文本编辑器(自定义工具栏、重写上传文件功能、工具栏中增加额外的功能按钮)
-
在字符串资源文件中添加HTML元素,直接使用字符串资源,HTML元素没起作用的解决办法_html/css_WEB-ITnose
-
svg矢量图标在html中的使用, (知识点:1.通过h5中的css实现点击变色,2.一个svg文件包含多个图标)
-
html - 使用uploadfiy插件时,为什么在uploadify.php文件中写的调试信息不输出