使用jquery+iframe做一個(gè)ajax上傳效果(實(shí)例)
更新時(shí)間:2017年08月24日 10:04:41 投稿:jingxian
下面小編就為大家?guī)?lái)一篇使用jquery+iframe做一個(gè)ajax上傳效果(實(shí)例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
html頁(yè)面
<!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做一個(gè)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 做一個(gè)ajax上傳效果 /* 思路: 1: 點(diǎn)擊"提交"時(shí)的瞬間,生成一個(gè)iframe對(duì)象,插入body中 2: 修改form的target ,為iframe的name值 3: 給iframe加1個(gè)事件 ,onload */ $( function() { $('input:button').click(function(){ //alert('s'); var ifmname = 'ifm' + Math.random(); var ifm = $('<iframe width="0" height="0" frameborder="0" name="'+ ifmname +'">'); ifm.appendTo($('body')); $('form').attr('target',ifmname); $('form').submit(); $('#progress').html('<img src="<img src="http://img.jbzj.com/file_images/article/201708/loading.gif" alt="" />" border="0">'); ifm.load(function(){ $('#progress').html('上傳完畢'); this.remove(); }); }); } ); </script> <style type="text/css"> </style> </head> <body> <div id="progress"></div> <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['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';
以上這篇使用jquery+iframe做一個(gè)ajax上傳效果(實(shí)例)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05JQERY limittext 插件0.2版(長(zhǎng)內(nèi)容限制顯示)
JQERY limittext 插件為長(zhǎng)內(nèi)容增加一個(gè)顯示更多的功能2010-08-08jQuery函數(shù)的第二個(gè)參數(shù)獲取指定上下文中的DOM元素
這篇文章主要介紹了jQuery函數(shù)的第二個(gè)參數(shù)獲取指定上下文中的DOM元素,需要的朋友可以參考下2014-05-05webpack寫(xiě)jquery插件的環(huán)境配置
本篇文章給大家講述了用webpack開(kāi)發(fā)jquery插件需要的環(huán)境以及配置講解,有需要的讀者們參考下吧。2017-12-12jQuery Attributes(屬性)的使用(二、類(lèi)篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡(jiǎn)單,全面為基礎(chǔ),不會(huì)涉及很深,我的學(xué)習(xí)方法:先入門(mén),后進(jìn)階!2009-12-12jQuery動(dòng)畫(huà)animate方法使用介紹
用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象,下面為大家詳細(xì)介紹下animate方法的具體使用,感興趣的朋友可以了解下哈2013-05-05