Home >Web Front-end >JS Tutorial >jquery and iframe make an ajax upload effect example sharing

jquery and iframe make an ajax upload effect example sharing

小云云Original: 2017-12-30 14:03:581297browse

This article mainly brings you an article using jquery+iframe to create an ajax upload effect (example). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>利用jquery+iframe做一个ajax上传效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// 利用 jquery+iframe 做一个ajax上传效果

/*
思路:
1: 点击"提交"时的瞬间,生成一个iframe对象,插入body中
2: 修改form的target ,为iframe的name值
3: 给iframe加1个事件 ,onload
*/

$(
 function() {
  $(&#39;input:button&#39;).click(function(){
   //alert(&#39;s&#39;);
   var ifmname = &#39;ifm&#39; + Math.random();
   var ifm = $(&#39;<iframe width="0" height="0" frameborder="0" name="&#39;+ ifmname +&#39;">&#39;);
   ifm.appendTo($(&#39;body&#39;));

   $(&#39;form&#39;).attr(&#39;target&#39;,ifmname);
   $(&#39;form&#39;).submit();

   $(&#39;#progress&#39;).html(&#39;<img src="<img src="http://files.php.cn/file_images/article/201708/loading.gif" alt="" />" border="0">&#39;);
   ifm.load(function(){
    $(&#39;#progress&#39;).html(&#39;上传完毕&#39;);
    this.remove();
   });

  }); 
 }
);


</script>
<style type="text/css">
</style>
</head>
 <body>
  <p id="progress"></p>
  <form action="upfile.php" method="post" enctype="multipart/form-data" target="upfile">
   <input type="file" name="pic" /><br />
   <input type="button" value="提交" />
  </form>  
 </body>
</html>

upfile.php

 echo move_uploaded_file($_FILES[&#39;pic&#39;][&#39;tmp_name&#39;],&#39;./upload/&#39; . $_FILES[&#39;pic&#39;][&#39;name&#39;]) ? &#39;OK&#39;:&#39;fail&#39;;

Have you learned it? It feels really good, so give it a try.

Related recommendations:

Example sharing Ajax upload file progress bar Codular

Example explanation H5 mobile development Ajax upload multiple Base64 format pictures To the server

How to implement the Ajax upload image and preview function

The above is the detailed content of jquery and iframe make an ajax upload effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use jQuery to implement the function of timing pop-up advertisements on the pageNext article：Use jQuery to implement the function of timing pop-up advertisements on the page

See more

jquery and iframe make an ajax upload effect example sharing

Related articles