jquery und iframe erstellen eine Beispielfreigabe für einen Ajax-Upload-Effekt-js-Tutorial-php.cn

jquery und iframe erstellen eine Beispielfreigabe für einen Ajax-Upload-Effekt

小云云

Freigeben： 2017-12-30 14:03:58

Original

1285 Leute haben es durchsucht

Dieser Artikel enthält hauptsächlich einen Artikel, in dem jquery + iframe zum Erstellen eines Ajax-Upload-Effekts verwendet wird (Beispiel). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

HTML-Seite

<!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>

Nach dem Login kopieren

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;;

Nach dem Login kopieren

Habt ihr es alle gelernt? Es fühlt sich wirklich gut an, also probieren Sie es aus.

Verwandte Empfehlungen:

Beispiel für die Freigabe von Ajax-Upload-Datei-Fortschrittsbalken Codular

Beispielerklärung für die H5-Mobilentwicklung mit Ajax beim Hochladen mehrerer Bilder im Base64-Format Zum Server

So implementieren Sie die Ajax-Upload-Bild- und Vorschaufunktion

Das obige ist der detaillierte Inhalt vonjquery und iframe erstellen eine Beispielfreigabe für einen Ajax-Upload-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!