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

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

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>    
<script type="text/javascript" src="ajaxfileupload.js"></script>   
<form id="upform" action="" method="post" enctype="multipart/form-data"> 
<input id='fname' size='80' /><br> <input type="file" name="file1" 
   id="file1" size="30" /> <input type="button" value="上传" 
   onclick="return ajaxFileUpload();" /> <span id="msg" 
   style="display: none">UpLoading...</span> 
</form>  
<script type="text/javascript"> 
var str = ''; 
function ajaxFileUpload(){ 
$("#msg") 
.ajaxStart(function(){ 
   $(this).show(); 
}); 
/* 
.ajaxComplete(function(){ 
   $(this).hide(); 
}); 
*/ 
$.ajaxFileUpload( 
{ 
   url:'up_deal.php', 
   secureuri:false, 
   fileElementId:'file1', 
   dataType: 'text', 
   //data:{name:'qinmi', id:'123'}, 
   success: function(data){ 
  if(data=='error'){ 
 $('#msg').html("<span style='color:red'>上传失败</span>"); 
  }else{  
  $('#msg').html("<span style='color:green'>上传成功</span>"); 
  str +=  data+'@'; 
  $('#fname').val(str); 
  } 
   } 
   } 
); 
return false; 
} 
</script> 
up_deal.php代码如下:
<?php 
if ((($_FILES["file1"]["type"] == "image/gif") 
|| ($_FILES["file1"]["type"] == "image/jpeg") 
|| ($_FILES["file1"]["type"] == "image/bmp") 
|| ($_FILES["file1"]["type"] == "image/pjpeg")) 
&& ($_FILES["file1"]["size"] < 100000)){//100KB 
$extend = explode(".",$_FILES["file1"]["name"]); 
$key = count($extend)-1; 
$ext = ".".$extend[$key]; 
$newfile = time().$ext; 
if(!file_exists('upload')){mkdir('upload');} 
move_uploaded_file($_FILES["file1"]["tmp_name"],"upload/" . $newfile); 
@unlink($_FILES['file1']); 
echo $newfile; 
}else { 
echo 'error'; 
}
?>

其中需要用到ajaxfileupload.js 这个文件.

教程网址:http://www.phprm.com/scxz/fs3483.html

欢迎收藏∩_∩但请保留本文链接。