ajax文件上传
这是昨天在应用开发时用到的一款ajax图片上传功能了,方法很简单的就是把文件利用js给iframe来直接上专,如果上传文件成功返回1,再用js判断是否上传成功如果是就输出图片并显示预览效果。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>ajax文件上传</title>
<style type="text/css教程">
#f1_upload_process { display:none;}
</style>
<script language="网页特效" type="text/javascript">
<!--function $(id)
{
return document.getelementbyid(id);
}function startupload(){
if( $('myfile').value =='' )
{
alert('请选择要上传图片!');
return false;
}
var array = $('myfile').value.split('.');
var ext = array[1].tolowercase();
if( ext =="gif" || ext =="jpg" || ext =="png" )
{
$('f1_upload_process').style.display = 'block';
$('f1_upload_form').style.display = 'block';
return true;
}
else
{
alert('只允许上传gif jpg png格式图像文件!');
return false;
}
}function stopupload(success,pic){
var result = '';
if (success ==1 ){
result ='<img src='+pic+' />';
$('logo').value=pic;
}
else {
result = '<span class="emsg">logo图片上传失败,请联系开发人员!</span><br/><br/>';
}
$('f1_upload_process').style.display = 'none';
$('f1_upload_form').innerhtml = result + '<br /><label><input name="myfile" type="file" size="30" /></label><label><input type="submit" name="submitbtn" class="sbtn" value="上传图片" /></label>';
$('f1_upload_form').style.display = 'block';
return true;
}//-->
</script>
</head><body>
<form action="upload.php教程" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="javascript:return startupload();" >
<span id="f1_upload_process"><img src="loader.gif" /></span>
<span id="f1_upload_form" align="center">
<input name="myfile" type="file" id="myfile" size="30" />
<input type="submit" name="submitbtn" class="sbtn" value="上传图片" />
</span>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
(可上传 gif,jpg,png)
</form>
</body>
</html>
upload.php
<?php
$destination_path = '../../upfile/jianjulogo/';//getcwd().directory_separator;$result = 0;
$target_path = $destination_path . basename( $_files['myfile']['name']);if(@move_uploaded_file($_files['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
echo $target_path;
sleep(1);
?>
<script language="javascript" type="text/javascript">window.top.window.stopupload(<?php echo $result; ?>,'<?=$target_path?>');</script>
补充:Php教程,Php高级应用