jquery.uploader.js
前端
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Uploader</title>
<style type="text/css">
* {margin:0; padding:0;}
body {font:12px/1.5 tohama,arial;}
a {text-decoration:none}
a:hover {text-decoration:underline;}
/*.upload-btn-over {background:#f00}*/
</style>
<link rel="stylesheet" href="jquery.uploader.css">
</head>
<body>
<h2>建议打开控制台查看上传过程</h2>
<br>
<span style="color:red">注意：1、本示例限制了只能上传 jpg,jpeg,gif,png 格式；2、文件大小超过1M（1024KB）则禁止上传</span>
<br><br>
<button type="button" id="selectFile">选择文件</button>
<a href="javascript:" onclick="$('#selectFile').uploader('start');" style="margin-left:20px;">开始上传</a>
<a href="javascript:" onclick="$('#selectFile').uploader('cancel', '*');">清空队列</a>
<span id="show_speed" style="margin-left:2em"></span>
<div id="queue" style="width:600px"></div>
<br><br>
<div id="preview"></div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script>
<!--script type="text/javascript" src="../static/js/jquery/jquery-1.7.2.min.js"></script-->
<script type="text/javascript" src="src/jquery.uploader.js"></script>
<script type="text/javascript">
function log(obj1, obj2){
if ('console' in window) {
obj2 ? console.log(obj1, obj2) : console.log(obj1);
}
}
$(function(){
var previewHTML = '';
$('#selectFile').uploader({
action: 'upload.php', //服务端脚本
//mode: 'flash', //上传模式，html5/flash
name: "file", //字段名
formData: {}, //
multiple: true, //是否多选
auto: false, //是否自动上传
//debug:true,
preview: true,
showQueue: '#queue', //显示队列的位置（传递jQuery选择器自定义队列显示的元素，传递true自动生成队列）
fileSizeLimit: '1M', //文件大小限制（'100kb' '5M' 等）
fileTypeDesc: '选择图片文件', //可选择的文件的描述，用中竖线分组。此字符串出现在浏览文件对话框的文件类型下拉中
fileTypeExts: 'jpg,jpeg,gif,png', //允许上传的文件类型类表，用逗号分隔多个扩展，用中竖线分组（eg: 'jpg,jpeg,gif,png | zip,rar'）
/*
// 鼠标点击触发按钮
onMouseClick: function(){
//log('onMouseClick')
},
// 鼠标经过触发按钮
onMouseOver: function(el){
//log('onMouseOver')
},
// 鼠标移出触发按钮
onMouseOut: function(el){
//log('onMouseOut')
},*/
// 上传初始化完成
onInit:function(){
log('onInit');
if (this.options.mode === 'html5') {
if ($.uploader.html5) log('恭喜，您的浏览器支持HTML5方式上传文件！');
else log('抱歉，由于您的浏览器不支持HTML5上传，将自动降级到Flash方式');
} else {
log('您设置了强制使用Flash方式上传！');
}
var o = '当前配置：';
o += this.options.multiple ? '允许多选' : '只能单选';
o += this.options.auto ? '，选择完文件后自动上传' : '，选择完文件后手动上传';
log(o);
log("===============================================");
},
// 选择文件
onSelected: function(filelist){
log('onSelected', filelist);
log("===============================================");
},
// 取消选择文件
onCancel: function(file){
log('onCancel', file);
log("===============================================");
},
// 开始上传
onStart: function(e){
log('onStart', e);
log("===============================================");
},
// 上传进行中
onProgress: function(e){
log('onProgress', e)
log('上传速度：'+ e.speed);
document.getElementById('show_speed').innerHTML = '上传速度：'+ e.speed;
log("===============================================");
},
// 上传发生错误
onError: function(e){
log('onError', e);
log("===============================================");
},
// 上传成功
onSuccess: function(e){
log('onSuccess', e);
log('上传成功！文件地址：'+ e.data);
if (e.file.type === "image/jpeg") previewHTML += '<img src="'+ e.data +'">';
log("===============================================");
log(" ");
},
// 单个文件处理完成（error or success）
onComplete: function(e){
log('onComplete', e);
log("===============================================");
},
// 全部文件处理完成（error or success）
onAllComplete: function(){
log('onAllComplete');
if ( previewHTML ) {
$('#preview').prepend(previewHTML);
previewHTML = '';
}
setTimeout(function(){
document.getElementById('show_speed').innerHTML = '';
}, 2000);
log("===============================================");
},
// 清空队列
onClearQueue: function(){
log('onClearQueue');
log("===============================================");
}
});
});
</script>
</body>
</html>
编辑：一起学习网