官方参考文档：
http://fex.baidu.com/webuploader/
文件下载地址：
https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip
html 页面代码：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js">script>
<link rel="stylesheet" type="text/css" href="webuploader.css" />
<script type="text/javascript" src="webuploader.js">script>
head>
<body>
<div id="filePicker">
<div class="webuploader-pick">选择图片div>
<input id="file" class="webuploader-element-invisible" name="file" accept="image/*" type="file">
div>
<div id="slt">div>
body>
<script>
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径《这个放在引入的 js 文件同级目录即可》
swf: '/js/Uploader.swf',
// 文件接收服务端。
server: 'fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
//上传成功
uploader.on( 'uploadSuccess', function( file, response ) {
//删除《选择图片按钮》
$("#filePicker").remove();
//弹出服务器返回信息
alert(response._raw);
});
//上传发生错误时
uploader.on('error', function(type){
//说明选择类型不对
if(type=='Q_TYPE_DENIED'){
alert('请选择正确的图片类型');
}
});
//上传完成，产生预览图
uploader.on( 'fileQueued', function( file ) {
var $li =$("#slt");
uploader.makeThumb( file, function( error, ret ) {
if ( error ) {
$li.text('预览错误');
} else {
$li.append('
'" />');
}
});
});
script>
html>fileupload.php 文件代码：
/*
需要注意的是，一般我们在测试开发时是在，window系统上的继承环境上的，而window上是gbk2312编码
要想存储的文件名也是中文的话，要从utf-8转为gbk2312,linux系统则不用，因为linux系统是utf-8编码
*/
$content = iconv( "utf-8","gb2312", $_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'],'./'.$content);
echo '文件上传成功！';
选择性参考：
觉得《选择图片框》比较大，所以调的小了一点。
webuploader.css 代码如下：
.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: 5px 0 8px 0;
color: #fff;
text-align: center;
border-radius: 5px;
overflow: hidden;
width: 100px;
height: 30px;
}
.webuploader-pick-hover {
background: #00a2d4;
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}