php下使用ajax异步上传图片并显示缩略图

来源：互联网发布：数据库订单管理系统编辑：程序博客网时间：2024/06/04 23:23

本人新手，点滴积累，汇聚成河！

1.html页面<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="js/jquery.js"></script>






<script src="js/ajaxfileupload.min.js"></script>
</head>
<body>
<table>
<tr>
<th>
游戏图标：
<span class="red">*</span>
</th>
<td>
<div>
<span id="filebigicon"><input type="file" name="gbigicon" id="gbigicon" class="txt"></span>

<img id="gbigicon_img" class="display_img" src="/{$game['game_icon']}" style="height: 48px; display:none" />
<input type="hidden" class="gbigicon_url" name="guploadgbigicon" id="guploadgbigicon" value="{$game['game_icon']}">
<input type="hidden" class="gbigicon_size" name="gbigicon_size" value="{$game['game_icon_size']}">
<input type="hidden" class="gbigicon_md5" name="gbigicon_md5" value="{$game['game_icon_md5']}">
</div>
</td>
</tr>
<tr>
<tr>
<th>
游戏封面：
<span class="red">*</span>
</th>
<td>
<div>
<span id="fileghallicon"><input type="file" name="ghallicon" id="ghallicon" class="txt"></span>
<img id="ghallicon_img" class="display_img" src="" style="height:100px; display:none" />
<input type="hidden" name="guploadghallicon" class="ghallicon_url" value="{$game['game_cover']}">
</div>
</td>
</tr>
</table>
</body>
<script>
function ajaxuploadimage(fileid) {
var filePath = $("#" + fileid).val(); //文件在本地的原始路径
var i = filePath.lastIndexOf('.'); //从右边开始找第一个'.'出现的位置
var len = filePath.length; //取得总长度
var str = filePath.substring(len, i + 1); //取得后缀名
console.log(str);
var exName = "JPG,GIF,PNG"; //允许的后缀名
var k = exName.indexOf(str.toUpperCase());//转成大写后判断
if (k == -1) {//没有符合的
alert("图片必须为JPG,GIF,PNG格式!");
} else {
$.ajaxFileUpload({
url: '/kuangjia/swfupload/swfupload.php?action=icon_thirdpart',//ajax处理上传图片
data: {picname: filePath}, //自定义参数,当有数据是与上传的图片相关的时候
secureuri: false,
fileElementId: fileid, //与页面处理代码中file相对应的ID值
dataType: 'json', //返回数据类型:text，xml，json，html,scritp,jsonp五种
success: function(data, status) {

if (data.code == 0) {
alert(data.msg);
} else {

$('#' + fileid + '_img').attr("src", '/' + data.fname).show();

$('.' + fileid + '_url').val(data.fname);
$('.' + fileid + '_md5').val(data.fmd5);
$('.' + fileid + '_size').val(data.fsize);

}

return true;
},

error: function(data, status, e) {
alert(e);
}
});
}
}

$(document).ready(function() {
//图标对应图标（只起一次作用）
$("#gbigicon").live('change', function() {
ajaxuploadimage('gbigicon');
});
//封面
$("#ghallicon").live('change', function() {
ajaxuploadimage('ghallicon');
});

});
</script>
</html>

2ajax处理界面

<?php
include "class_uploadfile.php";
error_reporting(7);
//ajax处理图片
if ($_REQUEST['action'] == 'icon_thirdpart') {
if ($_FILES['gbigicon']['name'] != '') {
$file = new UploadFile();
$file->Path = '';
$file->UploadDir = "upload/temp/" . date('Ymd');
if (!is_dir(mk_dir($file->UploadDir)))
echo $file->UploadDir, 'is not exists or not writable';

//返回路径上传路径
$filename = $file->Upload($_FILES['gbigicon']);

if ($file->Uploaded) {
if($filename){
$arr['fsize'] = $_FILES['gbigicon']['size'];
$arr['fname'] = $filename;
$arr['fmd5'] = md5_file($filename);
}
echo json_encode($arr);
} else {
$ret['code'] = 0;
$ret['msg'] = $file->Err;
echo json_encode($ret);
}
}
}
if ($_FILES['ghallicon']['name'] != '') {
$file = new UploadFile();
$file->Path = '';
$file->UploadDir = "upload/temp/" . date('Ymd');
// $file->FileType = array('png');
if (!is_dir(mk_dir($file->UploadDir)))
echo $file->UploadDir, 'is not exists or not writable';

$filename = $file->Upload($_FILES['ghallicon']);

if ($file->Uploaded) {
if($filename){
$arr['fsize'] = $_FILES['ghallicon']['size'];
$arr['fname'] = $filename;
$arr['fmd5'] = md5_file($filename);
}
echo json_encode($arr);
} else {
$ret['code'] = 0;
$ret['msg'] = $file->Err;
echo json_encode($ret);
}
}

function mk_dir($dir)
{
if (is_dir($dir))
return $dir; //目录已经存在直接返回目录
if (!@mkdir($dir, 0777, true))
return false; //目录创建不成功就返回false
if (is_dir($dir)) { //如果目录已存在
if ($fp = @fopen("$dir/test.test", 'w')) { //创建一个名为test.test的文件来测试
@fclose($fp); //关闭文件流
@unlink("$dir/test.test"); //删除测试文件
return $dir; //能创建文件则说明可读取，返回值为目录
} else {
return 1; //不能创建文件，即不可写,返回值为 1
}
}
}

我引用了一个文件上传类是项目要用的你也可以不引用这里也贴下代码：

<?php

/**

* php文件上传类

* @file uploadclass.php

*/

class UploadFile {

public $Path;

public $UploadDir;

public $SaveName;

public $FileType;

public $MaxSize;

public $Err;

public $Uploaded;

public function __construct(){

$this->Path = $_SERVER['DOCUMENT_ROOT'];

$this->UploadDir = 'upload/';

$this->SaveName = '';

$this->FileType = array('jpg','gif','bmp','png','swf','exe','zip');

$this->MaxSize = 51200;

$this->Err = array();

$this->Uploaded = false;

}

public function Upload($upfile, $oldfile='',$is_create_dir=false){

if(is_uploaded_file($upfile['tmp_name'])){

if(!empty($upfile)){

if(substr($this->UploadDir,-1,1)!='/' && !empty($this->UploadDir)){

$this->UploadDir .= '/';

}

if(trim($this->SaveName)==''){

$this->SaveName = date('YmdHis',time()).rand(100,999);

}

$_tmp =explode('.', $upfile['name']);
$fileExt = '.'.end($_tmp);

$this->SaveName .= strtolower($fileExt);

$savefile = $this->UploadDir.$this->SaveName;

$imgType = explode('/',$upfile['type']);

if($upfile['size'] == 0){

$this->Err[] = '上传失败，文件大小为0字节!';

}

if(!in_array(strtolower(substr($fileExt,1)),$this->FileType)){

$this->Err[] = '不允许上传该类型的文件！('.$fileExt.')';

}

if($upfile['error'] !=0){

$this->Err[] = '未知错误，文件上传失败！';

}

if($upfile['size']/1024 > $this->MaxSize){

$this->Err[] = '文件大小超出上限，只允许上传大小为 '. $this->MaxSize . 'k的文件！';

}

if(!file_exists($this->Path.$this->UploadDir)){

@mkdir($this->Path.$this->UploadDir,0777,true);//创建文件目录

}

if(!file_exists($this->Path.$this->UploadDir) && trim($this->Path.$this->UploadDir)!=''){

if($is_create_dir){

$dir_path = explode('/',$this->UploadDir);

$sub_path = $this->Path;

foreach($dir_path as $dir){

$sub_path .= $dir.'/';

// @mkdir($sub_path,0777);

}

}else{

$this->Err[] = '上传目录不存在且设置为不允许创建目录！';

}

}

if(!$this->Err){

move_uploaded_file($upfile['tmp_name'],$this->Path.$savefile);

if(trim($oldfile)!='' && file_exists($this->Path.$oldfile)){

@unlink($this->Path.$oldfile);

}

$this->Uploaded = true;

return $savefile;

}else{

@unlink($upfile['tmp_name']);

}

}

}

return trim($oldfile);

}

}

/**

//调用

//if(isset($_FILES['file'])){

$file = new UploadFile();

$file->Path = './../';

$file->UploadDir = "product/image/".date('Ymd');

$filename = $file->Upload($_FILES['file']);

if($file->Uploaded){

echo $filename;

}else{

print_r($file->Err);

}

}

*/

?>

1 0