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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../js/jquery-1.6.2.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../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" id="pic_path"><div id="upload_button" >文件上传</div>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" alt="预览图片" id="ima" >
</ul>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
