官方参考文档：
http://fex.baidu.com/webuploader/
文件下载地址：
https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip
html 页面代码：
<!DOCTYPE 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>
var uploader = WebUploader.create({
auto: true,
swf: '/js/Uploader.swf',
server: 'fileupload.php',
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('<img alt="" src="' + ret + '" />');
}
});
});
</script>
</html>
fileupload.php 文件代码：
$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);
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;
}
