WebUploader 资源下载
http://fex.baidu.com/webuploader/download.html
WebUploader 使用方法
http://fex.baidu.com/webuploader/getting-started.html
php 上传代码
<?php
header('Content-type:text/html;charset=utf-8');
if($_FILES['file']['error'] == 0){ // 判断上传是否正确
$fileName = $_FILES['file']['name']; // 获取文件名称
$fileSize = $_FILES['file']['size']; // 获取文件大小
$tmp_name = $_FILES["file"]["tmp_name"]; // 获取上传文件默认临时地址
$fileTypeInfo = ['doc','jpg','png','docx','xls','xlsx','log']; // 定义允许上传文件类型【很多种只列举3种】
$fileType = substr(strrchr($fileName,'.'),1); // 提取文件后缀名
if(!in_array($fileType,$fileTypeInfo)){ // 判断该文件是否为允许上传的类型
echo '上传失败,文件格式不正确';
die();
}
if($fileSize /1024 > 10240){ // 规定文件上传大小【文件为Byte/1024 转为 kb】
echo '上传失败，文件太大请上传小于1024Kb';
die();
}
date_default_timezone_set('PRC'); // 定义时间戳
if(!file_exists('D:/PHPsoftware/wamp64/www/stt/')){ // 判断是否存在存放上传文件的目录
mkdir('D:/PHPsoftware/wamp64/www/stt/'); // 建立新的目录
}else{
$newFileName = $fileName; // 命名新的文件名称
if(move_uploaded_file($tmp_name,'D:/PHPsoftware/wamp64/www/stt/'.$newFileName)){ // 移动文件到指定目录
echo ("‘../../PHPsoftware/wamp64/www/stt/cs’ 上传成功");
}
}
}else{
echo "上传失败".$_FILES['file']['error']; // 显示错误信息
}
?>
html 页面代码
jquery下载地址（注意:使用webuploader 插件必须得jquery-1.11.1版本及以上才可以）
http://code.jquery.com/jquery-1.11.1.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="./assets/js/webuploader.css">
<!--引入JS-->
<script src="./assets/js/jquery-1.11.1.min.js"></script>
<script src="./assets/js/webuploader.js"></script>
<script type="text/javascript">
$(function() {
//开始上传按钮
var $btn = $('#ctlBtn');
//文件信息显示区域
var $list = $('#thelist');
//当前状态
var state = 'pending';
//初始化Web Uploader
var uploader = WebUploader.create({
// swf文件路径
swf: './assets/js/Uploader.swf',
// 文件接收服务端。
server: 'upload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
//设置文佳上传的类型格式
accept: { //不建议使用，使用时选择文件div失效
title: 'file',
extensions: 'xls,xlsx,word,doc,ppt,docx,rtf,ppt,txt,pptx,pdf',
mimeTypes: '.xls,.xlsx,.word,.doc,.ppt,.docx,.rtf,.ppt,.txt,.pptx,.pdf'
}
});
// 当有文件被添加进队列的时候（选择文件后调用）
uploader.on( 'fileQueued', function( file ) {
$list.append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>' );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id );
$li.find('p.state').text('上传中（' + parseInt(percentage * 100) + '%）');
});
// 文件上传成功后会调用
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).find('p.state').text('已上传');
savefilemanager("/vod/uploadfilemanager/"+file.name,file.name);
});
// 文件上传失败后会调用
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上传出错');
});
// 文件上传完毕后会调用（不管成功还是失败）
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
});
// all事件（所有的事件触发都会响应到）
uploader.on( 'all', function( type ) {
if ( type === 'startUpload' ) {
state = 'uploading';
} else if ( type === 'stopUpload' ) {
state = 'paused';
} else if ( type === 'uploadFinished' ) {
state = 'done';
}
if ( state === 'uploading' ) {
$btn.text('暂停上传');
} else {
$btn.text('开始上传');
}
});
// 开始上传按钮点击事件响应
$btn.on( 'click', function() {
if ( state === 'uploading' ) {
uploader.stop();
} else {
uploader.upload();
}
});
});
</script>
<style>
#picker {
display: inline-block;
}
#ctlBtn {
position: relative;
display: inline-block;
cursor: pointer;
background: #EFEFEF;
padding: 10px 15px;
color: #2E2E2E;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
#ctlBtn:hover {
background: #DDDDDD;
}
<style>
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
display: inline-block;
cursor: pointer;
background: #00b7ee;
padding: 10px 15px;
color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.webuploader-pick-hover {
background: #00a2d4;
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}
#picker {
display: inline-block;
}
#ctlBtn {
position: relative;
display: inline-block;
cursor: pointer;
background: #EFEFEF;
padding: 10px 15px;
color: #2E2E2E;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
#ctlBtn:hover {
background: #DDDDDD;
}
#picker {
display: inline-block;
}
#ctlBtn {
position: relative;
display: inline-block;
cursor: pointer;
background: #EFEFEF;
padding: 10px 15px;
color: #2E2E2E;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
#ctlBtn:hover {
background: #DDDDDD;
}
</style>
</head>
<body>
<div id="uploader" class="wu-example">
<div class="btns">
<div id="picker">选择文件</div>
<div id="ctlBtn" class="webuploader-upload">开始上传</div>
</div>
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
</div>
</body>
</html>
