你的位置:首页 > 软件开发 > Java > 基于jQuery的ajax系列之用FormData实现页面无刷新上传

基于jQuery的ajax系列之用FormData实现页面无刷新上传

发布时间:2017-01-16 00:00:33
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和FormData接口。关于FormData,大家可以看MDN文档。1,先看效 ...

基于jQuery的ajax系列之用FormData实现页面无刷新上传

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和FormData接口。关于FormData,大家可以看MDN文档。

1,先看效果图

基于jQuery的ajax系列之用FormData实现页面无刷新上传

期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击“ajax提交”,将文件上传至服务器,上传成功后,页面给出一个简单的提示。

2,前端的代码

看下html代码:

 1     <div class="box"> 2       <div> 3         <div class="item"> 4           <input type="file" name="myfile" style="font-size: 0.7rem;"> 5         </div> 6         <div class="item"> 7           <button type="button" style="display: block; padding: 4px 18px;" class="btn-default">ajax提交</button> 8         </div> 9         <div class="item">10           <button type="submit" style="display: block; padding: 4px 18px;" class="btn-default">form提交</button>11         </div>12       </div>13       <div class="prompt" style="font-size: 0.7rem;"></div>14     </div>15     <script src='/images/loading.gif' data-original="../../js/jquery-3.1.0.min.js"></script>16     <script src='/images/loading.gif' data-original="upload01.js"></script>

原标题:基于jQuery的ajax系列之用FormData实现页面无刷新上传

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录