您的位置：首页 > Web前端 > JQuery

jQuery上传插件Uploadify 3.2.1 简单例子

2014-07-26 11:14 405 查看

Uploadify下载地址：http://www.uploadify.com/download/

Uploadify官网文档：http://www.uploadify.com/documentation/

Uploadify官网Demo：http://www.uploadify.com/demos/

1、导入CSS和JS文件

<link href="/scripts/uploadify/uploadify.css" rel="stylesheet" />
<script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/scripts/uploadify/jquery.uploadify.min.js"></script>

2、HTML内容

<body>
<div id="uploadfileQueue"></div>
<div>
<input type="file" name="upload_file" id="upload_file" />
<a href="javascript:void(0);" onclick="startUpload();">【开始上传】</a>
<a href="javascript:void(0);" onclick="cancelUpload();">【取消】</a>
</div>
</body>

3、JS内容

<script type="text/javascript">
$(function () {
$('#upload_file').uploadify({
//开启调试
'debug': false,
//是否自动上传
'auto': false,
//超时时间
'successTimeout': 99999,
//附带值
'formData': {
'userid': '用户id',
'username': '用户名'
},
//flash
'swf': '/scripts/uploadify/uploadify.swf',
//不执行默认的onSelect事件
'overrideEvents': ['onDialogClose'],
//文件选择后的容器ID
'queueID': 'uploadfileQueue',
//上传处理程序
'uploader': 'Uploadify',
//上传后保留进度条
'removeCompleted': false,
//选择文件按钮文字
'buttonText': '上传文件',
//浏览按钮的背景图片路径
//'buttonImage': 'upbutton.gif',
//浏览按钮的宽度
'width': '100',
//浏览按钮的高度
'height': '32',
//服务器端接收文件对象的名称
'fileObjName': 'file',
//在浏览窗口底部的文件类型下拉菜单中显示的文本
//'fileTypeDesc': '支持的格式：',
//允许上传的文件后缀
'fileTypeExts': '*.jpg;*.jpge;*.gif;*.png',
//上传文件的大小限制
'fileSizeLimit': '1MB',
//上传数量
'queueSizeLimit': 5,
//选择上传文件后调用
'onSelect': function (file) {

},
//返回一个错误，选择文件的时候触发
'onSelectError': function (file, errorCode, errorMsg) {
switch (errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的" + $('#upload_file').uploadify('settings', 'queueSizeLimit') + "个文件！");
break;
case -110:
alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#upload_file').uploadify('settings', 'fileSizeLimit') + "大小！");
break;
case -120:
alert("文件 [" + file.name + "] 大小异常！");
break;
case -130:
alert("文件 [" + file.name + "] 类型不正确！");
break;
}
},
//检测FLASH失败调用
'onFallback': function () {
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
//上传到服务器，服务器返回相应信息到data里
'onUploadSuccess': function (file, data, response) {
$('#upload_file').uploadify('disable', false);
alert(data);
}
});
});

function startUpload() {
$('#upload_file').uploadify('upload', '*');
$('#upload_file').uploadify('disable', true);
}

function cancelUpload() {
$('#upload_file').uploadify('cancel', '*');
$('#upload_file').uploadify('disable', false);
}

</script>

本例子参考：http://www.abc3210.com/2012/js_09/jquery-uploadify.shtml

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

标签： jquery 插件

相关文章推荐

新的分享

章节导航