最近公司要做一个上传头像的功能,我们希望用户点击上传就实现了文件上传并不需要跳转页面了,下面我们就一起来看个例子吧.

可以批量进行添加上传,简单方便,代码如下:

1. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>    
2. <script
3.     type="text/javascript" src="ajaxfileupload.js"></script>   
4. <form id="upform" action="" method="post" enctype="multipart/form-data"> 
5.     <input id='fname' size='80' /><br> <input type="file" name="file1" 
6.        id="file1" size="30" /> <input type="button" value="上传" 
7.        onclick="return ajaxFileUpload();" /> <span id="msg" 
8.        style="display: none">UpLoading...</span> 
9. </form>  
10. <script type="text/javascript"> 
11. var str = ''; 
12.  
13. function ajaxFileUpload(){ 
14.  
15.     $("#msg") 
16.  
17.     .ajaxStart(function(){ 
18.  
19.        $(this).show(); 
20.  
21.     }); 
22.  
23.     /* 
24.  
25.     .ajaxComplete(function(){ 
26.  
27.        $(this).hide(); 
28.  
29.     }); 
30.  
31.     */ 
32.  
33.     $.ajaxFileUpload( 
34.  
35.     { 
36.  
37.        url:'up_deal.php', 
38.  
39.        secureuri:false, 
40.  
41.        fileElementId:'file1', 
42.  
43.        dataType: 'text', 
44.  
45.        //data:{name:'qinmi', id:'123'}, 
46.  
47.        success: function(data){ 
48.  
49.               if(data=='error'){ 
50.  
51.                  $('#msg').html("<span style='color:red'>上传失败</span>"); 
52.  
53.               }else{  
54.  
55.                   $('#msg').html("<span style='color:green'>上传成功</span>"); 
56.  
57.                   str +=  data+'@'; 
58.  
59.                   $('#fname').val(str); 
60.  
61.               } 
62.  
63.            } 
64.  
65.        } 
66.  
67.     ); 
68.  
69.     return false; 
70.  
71. } 
72.  
73. </script> 

up_deal.php代码如下:

1. <?php 
2.  
3. if ((($_FILES["file1"]["type"] == "image/gif") 
4.  
5. || ($_FILES["file1"]["type"] == "image/jpeg") 
6.  
7. || ($_FILES["file1"]["type"] == "image/bmp") 
8.  
9. || ($_FILES["file1"]["type"] == "image/pjpeg")) 
10.  
11. && ($_FILES["file1"]["size"] < 100000)){//100KB 
12.  
13.     $extend = explode(".",$_FILES["file1"]["name"]); 
14.  
15.     $key = count($extend)-1; 
16.  
17.     $ext = ".".$extend[$key]; 
18.  
19.     $newfile = time().$ext; 
20.  
21.  
22.  
23.     if(!file_exists('upload')){mkdir('upload');} 
24.  
25.     move_uploaded_file($_FILES["file1"]["tmp_name"],"upload/" . $newfile); 
26.  
27.     @unlink($_FILES['file1']); 
28.  
29.     echo $newfile; 
30.  
31. }else { 
32.  
33.     echo 'error'; 
34.  
35. } 
36.  
37. ?> 

Tags: ajaxfileupload ajax文件上传

分享到：