Heim > Web-Frontend > HTML-Tutorial > iframe无刷新上传文件_html/css_WEB-ITnose

iframe无刷新上传文件_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:51:22
Original
990 Leute haben es durchsucht

许多系统都会有上传图片这个功能,但是如果是用form表单提交的话,每次都会刷新页面,这样体验很不好;今天分享一个利用iframe实现无刷新上传文件的方法,直接上代码:

html

<form class="form-horizontal text-sm" id="upload" name="upload[]" target="frm" action="/ERP/files/upFiles" method="post" enctype="multipart/form-data"> <input type='file' id="file" name="files[]" accept=".csv" multiple="multiple" /> <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />  //限制文件大小</form><iframe id='frm' name='frm' style="display: none;"></iframe>
Nach dem Login kopieren

javascript

<script type="text/javascript"> function callback(res){    console.log(res);  //返回的对象 }  var frm = $("#frm");  frm.load(function(){   var wnd = this.contentWindow;   var str = $(wnd.document.body).find("pre").html();   str=JSON.parse(str);  //将json字符串数据转换成对象Object   callback(str); });</script>
Nach dem Login kopieren

原理:认真看的同学会发现,此处的iframe是隐藏的,此方法就是通过隐藏的iframe来提交数据,所以原来的页面就不会被刷新了;

觉得不错,赞助我:

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage