使用jquery+iframe做一個(gè)ajax上傳效果(實(shí)例)
更新時(shí)間：2017年08月24日 10:04:41 投稿：jingxian
下面小編就為大家?guī)硪黄褂胘query+iframe做一個(gè)ajax上傳效果(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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)文章
easyui中combotree循環(huán)獲取父節(jié)點(diǎn)至根節(jié)點(diǎn)并輸出路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猠asyui中combotree循環(huán)獲取父節(jié)點(diǎn)至根節(jié)點(diǎn)并輸出路徑實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jQuery.Validate驗(yàn)證庫(kù)的使用介紹
本篇文章介紹了，jQuery.Validate驗(yàn)證庫(kù)的使用。需要的朋友參考下2013-04-04
jQuery向webApi提交post json數(shù)據(jù)
這篇文章主要介紹了jQuery向webApi提交post json數(shù)據(jù)的方法，非常不錯(cuò)，需要的的朋友參考下2017-01-01
jquery img src 獲取實(shí)現(xiàn)代碼
利用jquery 取得IMG src的問題，有需要的朋友可以參考下。2009-05-05
下面就日常最常用的，在Form表單中如何獲取被中選的Radio值做一小小的示例，感興趣的朋友可以參考下2013-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片高亮顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
jQuery實(shí)現(xiàn)右下角可縮放大小的層完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)右下角可縮放大小的層,以完整實(shí)例形式分析了jQuery頁(yè)面元素及相關(guān)樣式屬性操作技巧,需要的朋友可以參考下2016-06-06
Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
這篇文章主要是對(duì)jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了jquery操作select常見方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery操作select常見的7種情況與相關(guān)操作技巧,需要的朋友可以參考下2019-05-05