suchen

Heim >Web-Frontend >js-Tutorial >jquery und iframe erstellen eine Beispielfreigabe für einen Ajax-Upload-Effekt

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

小云云
小云云Original
2017-12-30 14:03:581272Durchsuche

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>

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

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!

Stellungnahme：
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
Vorheriger Artikel：Verwenden Sie jQuery, um die Funktion zum Timing von Popup-Werbung auf der Seite zu implementierenNächster Artikel：Verwenden Sie jQuery, um die Funktion zum Timing von Popup-Werbung auf der Seite zu implementieren

In Verbindung stehende Artikel

Mehr sehen