`
CshBBrain
  • 浏览: 650321 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:144949
Group-logo
HTML5移动开发
浏览量:137894
社区版块
存档分类
最新评论

html文件上传

阅读更多

转自:http://www.pc6.com/infoview/Article_50285.html

在网络编程过程中需要向服务器上传文件。Multipart/form-data是上传文件的一种方式。

Multipart/form-data其实就是浏览器用表单上传文件的方式。最常见的情境是:在写邮件时,向邮件后添加附件,附件通常使用表单添加,也就是用multipart/form-data格式上传到服务器。

表单形式上传附件

具体的步骤是怎样的呢?

首先,客户端和服务器建立连接(TCP协议)。

第二,客户端可以向服务器端发送数据。因为上传文件实质上也是向服务器端发送请求。

第三,客户端按照符合“multipart/form-data”的格式向服务器端发送数据。

Multipart/form-data的格式是怎样的呢?

既然Multipart/form-data格式就是浏览器用表单提交数据的格式,我们就来看看文件经过浏览器编码后是什么样子。

  

 

HTML表单

 

浏览器打开的表单

 

点击“Browse…”分别选择“unknow.gif”和“unknow1.gif”文件,点击“submit”按纽后,文件将被上传到服务器。

下面是服务器收到的数据:

 

服务器收到的数据

这是一个POST请求。所以数据是放在请求体内,而不是请求头内。

这行指出这个请求是“multipart/form-data”格式的,且“boundary”是 “---------------------------7db15a14291cce”这个字符串。

不难想象,“boundary”是用来隔开表单中不同部分数据的。例子中的表单就有 2 部分数据,用“boundary”隔开。“boundary”一般由系统随机产生,但也可以简单的用“-------------”来代替。

实际上,每部分数据的开头都是由"--" + boundary开始,而不是由 boundary 开始。仔细看才能发现下面的开头这段字符串实际上要比 boundary 多了个 “--”   

紧接着 boundary 的是该部分数据的描述。

接下来才是数据。

 

可以用鼠标滚动改变大小

 

“GIF”gif格式图片的文件头,可见,unknow1.gif确实是gif格式图片。

在请求的最后,则是 "--" + boundary + "--" 表明表单的结束。

 

需要注意的是,在html协议中,用 “\r\n” 换行,而不是 “\n”。

下面的代码片断演示如何构造multipart/form-data格式数据,并上传图片到服务器。

//---------------------------------------

// this is the demo code of using multipart/form-data to upload text and photos.

// -use WinInet APIs.

//

//

// connection handlers.

//

HRESULT hr;

HINTERNET m_hOpen;

HINTERNET m_hConnect;

HINTERNET m_hRequest;

//

// make connection.

//

...

//

// form the content.

//

std::wstring strBoundary = std::wstring(L"------------------");

std::wstring wstrHeader(L"Content-Type: multipart/form-data, boundary=");

wstrHeader += strBoundary;

HttpAddRequestHeaders(m_hRequest, wstrHeader.c_str(), DWORD(wstrHeader.size()), HTTP_ADDREQ_FLAG_ADD);

//

// "std::wstring strPhotoPath" is the name of photo to upload.

//

//

// uploaded photo form-part begin.

//

std::wstring strMultipartFirst(L"--");

strMultipartFirst += strBoundary;

strMultipartFirst += L"\r\nContent-Disposition: form-data; name=\"pic\"; filename=";

strMultipartFirst += L"\"" + strPhotoPath + L"\"";

strMultipartFirst += L"\r\nContent-Type: image/jpeg\r\n\r\n";

//

// "std::wstring strTextContent" is the text to uploaded.

//

//

// uploaded text form-part begin.

//

std::wstring strMultipartInter(L"\r\n--");

strMultipartInter += strBoundary;

strMultipartInter += L"\r\nContent-Disposition: form-data; name=\"status\"\r\n\r\n";

std::wstring wstrPostDataUrlEncode(CEncodeTool::Encode_Url(strTextContent));

// add text content to send.

strMultipartInter += wstrPostDataUrlEncode;

std::wstring strMultipartEnd(L"\r\n--");

strMultipartEnd += strBoundary;

strMultipartEnd += L"--\r\n";

//

// open photo file.

//

// ws2s(std::wstring)

// -transform "strPhotopath" from unicode to ansi.

std::ifstream *pstdofsPicInput = new std::ifstream;

pstdofsPicInput->open((ws2s(strPhotoPath)).c_str(), std::ios::binary|std::ios::in);

pstdofsPicInput->seekg(0, std::ios::end);

int nFileSize = pstdofsPicInput->tellg();

if(nPicFileLen == 0)

{

return E_ACCESSDENIED;

}

char *pchPicFileBuf = NULL;

try

{

pchPicFileBuf = new char[nPicFileLen];

}

catch(std::bad_alloc)

{

hr = E_FAIL;

}

if(FAILED(hr))

{

return hr;

}

pstdofsPicInput->seekg(0, std::ios::beg);

pstdofsPicInput->read(pchPicFileBuf, nPicFileLen);

if(pstdofsPicInput->bad())

{

pstdofsPicInput->close();

hr = E_FAIL;

}

delete pstdofsPicInput;

if(FAILED(hr))

{

return hr;

}

// Calculate the length of data to send.

std::string straMultipartFirst = CEncodeTool::ws2s(strMultipartFirst);

std::string straMultipartInter = CEncodeTool::ws2s(strMultipartInter);

std::string straMultipartEnd = CEncodeTool::ws2s(strMultipartEnd);

int cSendBufLen = straMultipartFirst.size() + nPicFileLen + straMultipartInter.size() + straMultipartEnd.size();

// Allocate the buffer to temporary store the data to send.

PCHAR pchSendBuf = new CHAR[cSendBufLen];

memcpy(pchSendBuf, straMultipartFirst.c_str(), straMultipartFirst.size());

memcpy(pchSendBuf + straMultipartFirst.size(), (const char *)pchPicFileBuf, nPicFileLen);

memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen, straMultipartInter.c_str(), straMultipartInter.size());

memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen + straMultipartInter.size(), straMultipartEnd.c_str(), straMultipartEnd.size());

//

// send the request data.

//

HttpSendRequest(m_hRequest, NULL, 0, (LPVOID)pchSendBuf, cSendBufLen)

分享到:
评论

相关推荐

    HTML文件上传示例

    在网页设计中,HTML文件上传和CSS3以及HTML5的页面标签切换是两个重要的技术点。HTML文件上传允许用户在浏览器端将本地文件传递到服务器,而CSS3和HTML5的页面标签切换则能为用户提供更流畅、更具交互性的浏览体验。...

    html文件上传后,处理类对上传文件的jar包处理

    html文件上传后,处理类对上传文件的jar包处理html文件上传后,处理类对上传文件的jar包处理html文件上传后,处理类对上传文件的jar包处理html文件上传后,处理类对上传文件的jar包处理html文件上传后,处理类对上传...

    jquery+ajaxfileupload+html文件上传

    在IT行业中,文件上传是网页应用中常见的功能之一,它允许用户将本地文件发送到服务器进行处理或存储。本教程将深入探讨如何使用jQuery、AjaxFileUpload插件以及HTML来实现一个无刷新的文件上传系统。 ### jQuery...

    ASP.NET通过HTML的上传文件标签来上传文件

    这篇博客文章“ASP.NET通过HTML的上传文件标签来上传文件”将引导我们了解如何在ASP.NET环境中实现文件上传功能。 首先,HTML中的`<input type="file">`标签是用于让用户选择本地文件的关键。在ASP.NET页面中,我们...

    文件上传美化样式HTML代码

    一个漂亮的文件上传样式的HTML源码,代替原来丑陋的文件上传按钮和长条文本框

    html post上传文件

    HTML文件上传功能是Web开发中的常见需求,它允许用户通过网页选择本地文件并发送到服务器。这个过程通常涉及HTML表单、HTTP协议以及后端处理程序。以下是对这个主题的详细解释: 一、HTML表单 HTML中的`<form>`元素...

    jQuery-edit(html文件上传)

    《jQuery-edit:HTML文件上传详解》 在网页开发中,用户交互是不可或缺的一部分,而文件上传功能则是增强用户体验的重要手段。jQuery-edit是一个基于jQuery库的HTML文件上传解决方案,它简化了传统的文件上传流程,...

    html5文件上传插件

    HTML5文件上传插件是一种基于Web技术实现的前端交互组件,它允许用户在网页上方便地上传文件到服务器,尤其适用于后台文件管理、图片展示、多媒体资源上传等场景。随着HTML5技术的发展,文件上传功能得到了显著提升...

    HTML5 文件上传

    HTML5 文件上传是现代网页开发中的一个重要特性,它极大地增强了用户与网站之间的交互性,特别是对于需要处理大量数据或媒体的网站来说。在HTML5之前,文件上传功能相对有限,通常只能选择一个文件,并且没有进度条...

    上传文件demo.html

    上传文件demo.html

    html5上传插件支持文件上传和图片上传代码

    HTML5上传插件是利用HTML5技术实现的一种增强网页文件上传功能的工具,它极大地提升了用户在网页上处理文件和图片的体验。HTML5引入了许多新的API和特性,其中包括File API、FormData对象以及拖放(Drag and Drop)...

    html5文件上传器演示

    客户端完全基于JavaScript的浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务端处理,由服务端存储断点信息实现断点...

    在html页面使用JavaScript实行文件上传到本地服务器并获取文件所在路径

    使用JavaScript实现文件上传到本地服务器并获取到上传后文件所在路径,是由到JavaScript,java以及html页面。这个比较好,不是在jsp上获取路径,jsp太简单了,而且过时了,所以就在html页面实现了下功能,我主要是做...

    上传HTML模板

    综合以上,"上传HTML模板"是一个包含了实现文件上传功能的HTML5前端设计,适用于移动设备,并且很可能使用了现代Web技术来提供更好的用户体验。它能够帮助开发者快速搭建具备文件上传功能的网站或应用,节省时间和...

    基于bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip

    标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件,并且在上传前可以...

    HTML多文件上传插件,可一次上传多个文件.zip

    "ajaxform插件使用时报错ajaxSubmit() is not a function - html文件中有多个jquery.js文件时可能会引起冲突.url"提醒我们,如果页面中包含了多个jQuery库,可能导致命名冲突,`ajaxSubmit()`函数无法识别。...

    HTML5多文件上传带预览效果源码下载

    HTML5是一种先进的网页标准,它在原有的HTML基础上引入了许多新的特性和功能,其中包括对多文件上传的支持。在本文中,我们将深入探讨HTML5如何实现多文件上传以及预览效果,结合源码分析来帮助你理解和应用这些技术...

    HTML5+WebSocket实现多文件同时上传的实例

    【WebSocket实现多文件上传】 WebSocket是一种在客户端与服务器之间建立长连接的协议,它可以提供双向通信,即服务器和客户端都可以随时发送数据。这使得实时交互应用如文件上传变得更为高效。结合HTML5的新特性,...

    Bootstrap样式文件上传jquery插件

    它将普通的HTML文件上传控件转化为符合Bootstrap风格的元素,使得整个页面的设计保持一致性和美观性。 Bootstrap本身是一个流行的开源前端开发框架,它提供了一系列预定义的CSS样式、JavaScript组件和HTML模板,...

    基于html5的文件上传

    "基于HTML5的文件上传"是指利用HTML5的新特性来实现更高效、更友好的文件上传体验,尤其对于大文件上传,它能提供进度条显示,使用户能够直观地了解文件上传的状态。本项目似乎是一个解决方案,包含一个名为`...

Global site tag (gtag.js) - Google Analytics