页面无刷新上传文件

　　原理：FORM标签中的target属性规定在何处打开 action URL，值列表如下：

值描述
_blank 在新窗口中打开。
_self 默认。在相同的框架中打开。
_parent 在父框架集中打开。
_top 在整个窗口中打开。
framename 在指定的框架中打开。

 

 

 

 

 

　　如果把target指向在本页面中的一个iframe，则提交上传文件时，会在指定的iframe中刷新，整体页面不会刷新，从而做到整体页面无刷新上传。

　　

 1 <!DOCTYPE HTML> 
 2 <html> 
 3     <head> 
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 5         <title>title</title>
 6         <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
 7         <style type="text/css">
 8             body{background-color: #f5f6f7;}
 9             .imgHolder{border: 2px dotted #bbb;color:#bbb;width: 120px;height: 140px;line-height: 140px;border-radius: 8px;cursor: pointer;text-align: center;position: relative;background-color: #fff;}
10             .imgHolder:hover{border-color: #999;color: #999;}
11             .imgHolder .add{font-size: 50px;}
12             .imgHolder img{width: 100%;height: 100%;}
13             .fileUploadBtn{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;cursor: pointer;outline: none;border:0 none;z-index: 1;opacity: 0;filter:alpha(opacity:1);}
14             .loading{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 2;display: none;
15                 background:url("data:image/gif;base64,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") center center no-repeat;
16             }
17             .loading span{font-size: 12px;display: block;margin-top: 30px;}
18         </style>
19     </head> 
20     <body>
21         <div class="imgHolder">
22             <span class="add">+</span>
23             <form action="upload.php" id="uploadFrom" method="post" target="uploadHolderFrame" enctype="multipart/form-data">
24                 <input type="file" name="file" class="fileUploadBtn" accept="image/*"/>
25             </form>
26             <div class="loading"><span>正在上传...</span></div>
27         </div>
28         <iframe id="uploadHolderFrame" name="uploadHolderFrame" style="position:absolute;top:-100px;left:-100px;width:0px;height:0px;"></iframe>
29         <script type="text/javascript">
30             jQuery(document).ready(function() {
31                 $('input[name="file"]').bind('change',function(){
32                     $('#uploadFrom').submit();
33                     $('.loading').show();
34                 });
35                 $('#uploadHolderFrame').bind('load',function(){
36                     var bodyContent = $(window.frames['uploadHolderFrame'].document.body).html();
37                     $('body').append('<div>'+bodyContent+'</div>')
38                     $('<img style="display:none;" src="'+bodyContent+'"/>').appendTo('.imgHolder').bind('load',function(){
39                         $('.imgHolder').empty().append($(this));
40                         $(this).show();
41                     })
42                 });
43             });
44         </script>
45     </body> 
46 </html>

　　效果如下：

　　

　　后台php处理代码：

　　

 1 <?php
 2     //var_dump($_FILES);
 3     if(sizeof($_FILES) == 0 || $_FILES['file']['error'] > 0 || $_FILES['file']['size'] == ''){
 4         echo sizeof($_FILES)==0 ? -1 : $_FILES['file']['error'];
 5     }else{
 6         $file_name = iconv('UTF-8', 'GBK', $_FILES['file']['name']);
 7         if(move_uploaded_file($_FILES['file']['tmp_name'], 'upload/'.$file_name)){
 8             echo 'upload/'.$_FILES['file']['name'];
 9         }
10     }
11 ?>

 

　　

posted @ 2013-04-20 13:40  jinphen  阅读(699)  评论(0)  编辑  收藏  举报