您的位置：首页 > 编程语言 > PHP开发

php+ajax上传文件(对各平台浏览器支持很好)

2016-11-29 10:30 465 查看

下载demo网址：http://www.uploadify.com/demos/

1、编写index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php+ajax上传文件</title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>

<body>
<form>
<div id="queue"></div>
<em>*</em> 上传文件：
<input id="file_upload" name="file_upload" type="file" multiple="true">
<input type="hidden" name="file_upload_value" id="file_upload_value" value="" />
<div id="uploadify_excel_list"></div>
</form>

<script type="text/javascript">
var uploadify = {
'formData'     : {
'plateform' : 0,
},
'swf'             : 'uploadify.swf',
'uploader'        : 'uploadify.php',
'buttonText'      : '立即上传',
'width'           : 80,
'height'          : 28,
'auto'            : true,
'multi'           : false,
'removeCompleted' : false,
'fileSizeLimit'   : '1MB',
'overrideEvents'  : ['onSelectError','onUploadError','onUploadSuccess','onDialogClose'],
'onUploadSuccess':function(file, data, response) {},
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
return false;
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
alert('上传失败');
},
}
uploadify.fileSizeLimit = '1024KB';
uploadify.onUploadSuccess = function(file, data, response){
$('.uploadify-queue-item').hide();
var d = $.parseJSON(data);
if(d.code==0){
//d.data.file上传文件的地址，便于处理
$('#file_upload_value').val(d.file);
//增加删除按钮
$('#uploadify_excel_list').html('<span>'+d.file+'</span> <a href="javascript:$(\'#file_upload_value\').val(\'\');$(\'#uploadify_excel_list\').html(\'\')">删除</a>');
//逻辑代码处理
}else{
alert(d.message);
}
};

$('#file_upload').uploadify(uploadify);
</script>
</body>
</html>

2、编写uploadify.php

<?php
$targetFolder = '/uploadify/uploads'; // Relative to the root

if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

// Validate the file type
$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
$fileParts = pathinfo($_FILES['Filedata']['name']);

if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
$data['file'] = $targetFile;
$data['code'] = 0;
$data['message'] = '上传成功';
echo json_encode($data);die;
} else {
$data['code'] = 1;
$data['message'] = '上传失败';
echo json_encode($data);die;
}
}
?>

3、编写uploadify.css

.uploadify {
position: relative;
margin-bottom: 1em;
display: inline-block;
}
.uploadify-button {
background-color: #D6D6D6;
background-image: linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
background-image: -o-linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
background-image: -moz-linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
background-image: -webkit-linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
background-image: -ms-linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #D6D6D6),
color-stop(1, #eee)
);
background-position: center top;
background-repeat: no-repeat;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 2px solid #808080;
color: #FFF;
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
width: 100%;
/*background: #D6D6D6;*/
color: #666666;
border-radius: 3px;
line-height: 34px;
width: 90px;
border: none;
height: 34px;
font-size: 14px;
}
.uploadify:hover .uploadify-button {
background-color: #eee;
background-image: linear-gradient(top, #eee 0%, #D6D6D6 100%);
background-image: -o-linear-gradient(top, #eee 0%, #D6D6D6 100%);
background-image: -moz-linear-gradient(top, #eee 0%, #D6D6D6 100%);
background-image: -webkit-linear-gradient(top, #eee 0%, #D6D6D6 100%);
background-image: -ms-linear-gradient(top, #eee 0%, #D6D6D6 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #eee),
color-stop(1, #D6D6D6)
);
background-position: center bottom;
}
.uploadify-button.disabled {
background-color: #D0D0D0;
color: #808080;
}
.uploadify-queue {
/*margin-bottom: 1em;*/
}
.uploadify-queue-item {
background-color: #F5F5F5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font: 11px Verdana, Geneva, sans-serif;
margin-top: 5px;
max-width: 350px;
padding: 10px;
}
.uploadify-error {
background-color: #FDE5DD !important;
}
.uploadify-queue-item .cancel a {
background: url('../images/uploadify-cancel.png') 0 0 no-repeat;
float: right;
height:	16px;
text-indent: -9999px;
width: 16px;
}
.uploadify-queue-item.completed {
background-color: #E5E5E5;
}
.uploadify-progress {
background-color: #E5E5E5;
margin-top: 10px;
width: 100%;
}
.uploadify-progress-bar {
background-color: #0099FF;
height: 3px;
width: 1px;
}

4、上传成功

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航