> 웹 프론트엔드 > HTML 튜토리얼 > iframe无刷新上传文件_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-21 08:51:22
원래의
989명이 탐색했습니다.

许多系统都会有上传图片这个功能,但是如果是用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>
로그인 후 복사

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>
로그인 후 복사

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

觉得不错,赞助我:

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿