接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和FormData接口。关于FormData,大家可以看MDN文档。1,先看效 ...
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和FormData接口。关于FormData,大家可以看MDN文档。
1,先看效果图
期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击“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
(#换成@)。