PHP+jquery+ajaxupload 無刷新上傳文件或圖片
我參照了網上其它的方法，其它人寫的都存在一些問題。我進行了些修正。
上傳文件更改文件名，防止文件重名。
第一步：包含這個；jquery 庫文件 和；ajaxupload庫文件。
自己上網下吧，有很多。
第二步：php上傳類file_upload.php
<?php
/*
program:趙金鵬
time:2012-04-11
todo:代碼還有很多可以加的方法，由於時間關係沒有加，以後有需要再更新。
*/
class file_upload
{
var $g_filename; // File對象名稱
var $g_Directroy; //上傳至目錄
var $g_MaxSize; //最大上傳大小
var $g_doUpFile; //上傳的文件名
var $g_sm_File; //縮略圖名稱
var $g_Error; //錯誤參數
//構造函數
public function file_upload($file_name,$dir_upload='')
{
$this->g_filename=$file_name;
$this->g_MaxSize=2097152; // (1024*2)*1024=2097152 就是 2M
$this->g_Error=0;
if($dir_upload=="")
$this->g_Directroy="upload";
else
$this->g_Directroy=$dir_upload;
}
//上傳
function upload()
{
if($this->Is_uploadDir() && $this->Is_FileMax())
{
$this->get_newname();
$file_path=$this->g_Directroy.'/'.$this->g_doUpFile;
if(!move_uploaded_file( $_FILES[$this->g_filename]['tmp_name'], $file_path))
{
$this->g_Error=5;
return $this->get_error();
}
else
{
$this->g_Error=0;
return $this->get_error();
}
}
else
return $this->get_error();
}
//生成新名稱
function get_newname()
{
$tempName = $_FILES[$this->g_filename]['name'];
$extStr = explode('.', $tempName);
$count = count($extStr)-1;
$ext = $extStr[$count];
$this->g_doUpFile=date('YmdHis').rand(0, 9).'.'.$ext;
}
//驗證上傳目錄是否存在
function Is_uploadDir()
{
if(!is_dir($this->g_Directroy))
{
if(!mkdir($this->g_Directroy))
{
$this->g_Error=1;
return false;
}
if(!chmod($this->g_Directroy,0755))
{
$this->g_Error=2;
return false;
}
}
return true;
}
//驗證上傳文件是否超出限制
function Is_FileMax()
{
if($_FILES[$this->g_filename]['size']>$this->g_MaxSize)
{
$this->g_Error=3;
return false;
}
return true;
}
//返回服務器文件名
function get_filename()
{
return $this->$g_doUpFile;
}
//自定義錯誤代碼
function get_error()
{
switch($this->g_Error)
{
case 0:
$tip="success:".$this->g_doUpFile;break;
case 1:
$tip="文件上傳目錄不存在並且無法創建文件上傳目錄";break;
case 2:
$tip="文件上傳目錄的權限無法設定爲可讀可寫";break;
case 3:
$tip="上傳的文件大小超過了規定大小";break;
case 4:
$tip="請選擇上傳的文件";break;
case 5:
$tip="複製文件失敗，請重新上傳";break;
}
return $tip;
}
}
?>
第三步 類調用方法頁 upload.php
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
include "file_upload.php";
$fu=new file_upload("userfile");
echo $fu->upload();
?>
第四步 頁面實現 add.php
圖片上傳以後，直接顯示預覽圖片。
<html>
<head>
<title>景點管理</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../../css/share.css" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../js/ajaxupload.3.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var button = $('#upload_button'), interval;
var fileType = "pic",fileNum = "one";
new AjaxUpload(button,{
action: 'upload.php',
name: 'userfile',
onSubmit : function(file, ext){
if(fileType == "pic")
{
if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
this.setData({
'info': '文件類型爲圖片'
});
} else {
button.text('非圖片類型文件，重新上傳');
return false;
}
}
$("#pic_path").val(file);
button.text('文件上傳中');
if(fileNum == 'one')
this.disable();
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 14){
button.text(text + '.');
} else {
button.text('文件上傳中');
}
}, 200);
},
onComplete: function(file, response){
if(response.indexOf("success")<0)
alert(response);
else
{
$arr=new Array();
$arr=response.split(":")
$("#ima").attr("src","upload/"+$arr[1]);
$("#ima").show();
button.text('重新上傳');
}
window.clearInterval(interval);
this.enable();
}
});
});
</script>
</head>
<ul>
<input type="text" size="50" style="float:left ;" id="pic_path"><div id="upload_button" style="float: left;border-bottom: #cc4f00 1px solid; border-left: #ff9000 1px solid;border-top: #ff9000 1px solid; border-right: #cc4f00 1px solid;text-align: center; padding: 2px 10px; line-height: 16px; background: #e36b0f; height: 24px; color: #fff; font-size: 12px; cursor: pointer;">文件上傳</div>
<img src="" alt="預覽圖片" id="ima" style="display: none;">
</ul>