之前写过一篇文章： jQuery.iframe-Transport.js来发送Ajax文件上传请求对返回JSON的处理，就是讲使用这个jQuery插件时对返回JSON数据的处理，该插件会内置一个 这样就可以实现 ajax的 multipart/form-data实现，注意这样做主要是为了兼容低版本浏览器，如果不考虑IE < 10的话，可以直接使用XHR2，参考 这个链接. </p> <p>所以代码还是和以前一样，如下(HTML)：</p> <pre class="sycode" name="code"><form id="avatarForm" enctype="multipart/form-data"> <input id="avatarUpload" name="avatarUpload" type="file" /></form></pre> <p>JavaScript:</p> <pre class="sycode" name="code">// avatarUpload是上面的type = “file”的input元素// 每当选择文件后立即发送Ajax请求$('#avatarUpload').change(function() { //'upload'是具体发送POST请求针对的服务器URL $.ajax('upload', { type: 'POST', files: $('#avatarUpload'), iframe: true, // 注意如果服务器返回结果是JSON，dataType要设置 dataType: 'json' }).done(function(data) { // 这里data是JavaScript对象 console.log('done()', data); }).fail(function() { console.log('fail()'); }).always(function() { console.log('always()'); });});</pre> <p>接下来在Golang中，处理这个 <form>，首先调用 http.Request的 ParseMultipartForm方法来处理 multipart/form-data，参数是内存内的最大Buffer大小，如果没有错误的话，返回一个 multipart.Form对象，里面的 File属性会包含用户上传文件的信息，具体请参考 文档，这里我们通过 logMultipartForm函数简单把里面的数据坐下输出，如下代码： </p> <pre class="sycode" name="code">// 输出multipart.Form内的数据func logMultipartForm(form *multipart.Form) { log.Print("Values:", form.Value) log.Print("Files:") for key := range form.File { headers := form.File[key] for _, header := range headers { log.Printf("Key: %v, Filename: %v, Header: %v", key, header.Filename, header.Header) } }}// 处理POST请求的Handler// Handler的声明可能根据不同路由HTTP框架而不一样func fileUploadHandler(ctx context.Context, w http.ResponseWriter, r *http.Request) { err := r.ParseMultipartForm(1024 * 50) //50kb buffer if err != nil { http.Error(w, err.Error(), http.StatusInternalServerError) return } form := r.MultipartForm logMultipartForm(form) /* 后面省略 */}</pre> <p>示例输出：</p> <pre class="sycode" name="code">Values: map[X-Requested-With:[IFrame] X-HTTP-Accept:[application/json, text/javascript, */*; q=0.01]]Files:Key: avatarUpload, Filename: IMG_1156.jpg, Header: map[Content-Disposition:[form-data; name="avatarUpload"; filename="IMG_1156.jpg"] Content-Type:[image/jpeg]]</pre> </td></tr></table></div> <div class="textbot"> <ul> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> <li>上一篇：<a href='/wangyezhizuo/2018-10-22/17087.html'>Web Accessibility网页无障碍介绍_html/css_WEB</a></li> <li>下一篇：<a href='/wangyezhizuo/2018-10-22/17089.html'>盲人如何使用互联网的8个误区_html/css_WEB</a></li> </ul></div> </div> </td><td valign="top"> <div id="sidebar"> <div class="sider2" id="column"> <div class="title">栏目导航</div> <ul class="li_float_l"><li><a href="/php/" title="php">php</a></li><li><a href="/asp/" title="asp">asp</a></li><li><a href="/jsp/" title="jsp">jsp</a></li><li><a href="/JavaScript/" title="JavaScript">JavaScript</a></li><li><a href="/XML/" title="XML">XML</a></li><li><a href="/C/" title="C">C</a></li><li><a href="/dos/" title="系统">系统</a></li><li><a href="/wangyezhizuo/" title="网页">网页</a></li><li><a href="/MySQL/" title="MySQL">MySQL</a></li><li><a href="/ACCESS/" title="ACCESS">ACCESS</a></li><li><a href="/shujujiegou/" title="数据结构">数据结构</a></li><li><a href="/vc/" title="VC">VC</a></li><li><a href="/Delphi/" title="Delphi">Delphi</a></li><li><a href="/e/action/ListInfo/?classid=22" title="微信">微信</a></li><li><a href="/e/action/ListInfo/?classid=24" title="PS">PS</a></li><li><a href="/lanqiu/" title="篮球">篮球</a></li><li><a href="/fuli/" title="福利">福利</a></li></ul> <div class="clear"></div> </div> <div class="sider2"> <div class="title">相关文章</div> 无相关信息 </div> <div class="sider2"> <div class="title">推荐文章</div> <ul></ul> <div class="more"><a href="/rec.html">更多推荐 >></a></div> </div> <div class="sider2"> <div class="title">栏目更新</div> <script src='/d/js/class/class8_newnews.js'></script> <div class="more"><a href="/new.html">更多更新 >></a></div> </div> <div class="pad-all ad-sider"><script type="text/javascript" src="/d/js/acmsd/gg2.js"></script></div> <div class="pad-all"> <div class="title2">您的展示窗口</div> <div class="ad-siderGG"> </div> </div> </div> </td></tr></table> <div id="footer"> <div id="botNav"><a href="/" >网站首页</a> | <a href="/php/" title="php">php</a> | <a href="/asp/" title="asp">asp</a> | <a href="/jsp/" title="jsp">jsp</a> | <a href="/JavaScript/" title="JavaScript">JavaScript</a> | <a href="/XML/" title="XML">XML</a> | <a href="/C/" title="C">C</a> | <a href="/dos/" title="系统">系统</a> | <a href="/wangyezhizuo/" title="网页">网页</a> | <a href="/MySQL/" title="MySQL">MySQL</a> | <a href="/ACCESS/" title="ACCESS">ACCESS</a> | <a href="/shujujiegou/" title="数据结构">数据结构</a> | <a href="/vc/" title="VC">VC</a> | <a href="/Delphi/" title="Delphi">Delphi</a> | <a href="/e/action/ListInfo/?classid=22" title="微信">微信</a> | <a href="/e/action/ListInfo/?classid=24" title="PS">PS</a> | <a href="/lanqiu/" title="篮球">篮球</a> | <a href="/fuli/" title="福利">福利</a> | <a href="#">返回顶部</a></div> <div id="copyright"> <ul> <li>版权所有 2017-2025 电脑技术 最佳分辨率 1024×768 Powered by inter.red</li> <li>Copyright © <a href="http://www.pcpol.com">www.pcpol.com</a>, All rights reserved. <a href="https://beian.miit.gov.cn/" target=_blank>京ICP备2021029896号-7</a> <noscript></noscript></li> </ul> </div> </div> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> <script src="/e/public/onclick/?enews=donews&classid=8&id=17088"></script></body> </html>