摘要:本文主要向大家介绍了Flash基础入门之Flash上传组件之SWFUpload文件上传,通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。
本文主要向大家介绍了Flash基础入门之Flash上传组件之SWFUpload文件上传,通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。
一、什么是SWFUpload?
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。
目前此项目放在:https://code.google.com/p/swfupload/
对应的中文API://leeon.me/upload/other/swfupload.html
由于SWFUpload是falsh和JavaScript结合开发的,这可能在HTML5流行的今天可能不太适合。而且SWFUpload和官网早就不更新了。推荐使用另一个插件Plupload,这个插件会自动检测当前浏览器适合的上传方式:HTML5、Flash、Silverlight。
SWFUpload的主要特点:
* 可以同时上传多个文件;
* 类似AJAX的无刷新上传;
* 可以显示上传进度;
* 良好的浏览器兼容性;
* 兼容其他JavaScript库 (例如:jQuery, Prototype等);
* 支持Flash 8和Flash 9;
SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。
二、一般的开发流程
1、引入对应的JS和CSS文件。
2、实例化SWFUpload对象,进行对象的初始化的配置。
3、浏览网页,打开并选取要上传的文件。
4、后台接收前台传送的文件流,进行处理。
5、后台返回对应的参数并进行前台提示。
这是我做的一个例子效果如下:
例一:
例二:
例一的代码:
index.jsp
<%-- created="" by="" intellij="" idea.="">
<%@ page="" contenttype="text/html;charset=UTF-8" language="java">
swfuploadHandlers.js
/**
* Created by zhang on 14-2-25.
*/
var queueErrorArray;
var setting = {
upload_url: "/upload", //后台处理的程序路径
flash_url: "swfupload/swfupload.swf", //swf程序路径
file_types: "*.jpg;*.png;*.gif;*.mp4;*.wmv", //允许上传文件种类
file_types_description: "Web Image", //对上传文件的描述
file_size_limit: "200MB", //文件上传的大小单位默认为KB
file_upload_limit: 0,
//debug
debug: false,
//handlers
file_dialog_start_handler: fileDialogStar, //打开选择对话框触发的事件
file_queued_handler: fileQueued, //把文件加入上传队列触发的事件
file_queue_error_handler: fileError, //文件加入队列错误时触发的事件
file_dialog_complete_handler: fileDialogComplete, //文件选择完成触发的事件
upload_start_handler: uploadStar, //文件上传触发的事件
upload_progress_handler: uploadprogress, //上传中触发的事件
upload_complete_handler: uploadComplete, //上传完成触发的事件
upload_success_handler: uploadSuccess, //上传成功时触发的事件
//button
button_placeholder_id: "swfPlaceHold",
button_text: "请选择上传文件",
button_width: 270,
button_height: 20,
button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT
};
var swfup = new SWFUpload(setting);
/*********************************************handler************************************/
/**
* 打开文件对话框时的触发的事件
*/
function fileDialogStar() {
if (queueErrorArray) {
queueErrorArray = null;
}
}
/**
* 文件加入上传队列时触发的事件
* @param 选择上传的文件对象
*/
function fileQueued(file) {
var swfup = this; //当前的swfupload实例对象
var listItem = "
";
listItem += "文件:" + file.name + "(" + Math.round(file.size / 1024) + "KB)";
listItem += "
";
listItem += "
";
$("#fileList").append(listItem);
//按钮的取消事件
$("li#" + file.id + " #cancle").click(function (e) {
swfup.cancelUpload(file.id);
$("li#" + file.id).remove();
});
}
/**
* 文件加入队列错误触发的事件
* @param file上传的文件对象
* @param errorCode返回的错误代码
* @param msg 错误信息
*/
function fileError(file, errorCode, msg) {
//错误队列数组
if (!queueErrorArray) {
queueErrorArray = [];
}
errorFile = {
file: file,
code: errorCode,
error: ''
};
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
errorFile.error = '文件大小超出限制';
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
errorFile.error = '文件类型不允许';
break;
case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
errorFile.error = '超出文件数量限制.';
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
errorFile.error = '你选择的文件是空的';
break;
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
errorFile.error = '服务器出错';
break;
case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
errorFile.error = '程序没有设置upload_url属性';
break;
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
errorFile.error = '读取或传输文件时发生错误';
break;
case SWFUpload.UPLOAD_ERROR.ZERO_BYTE_FILE:
errorFile.error = '文件为空文件';
break;
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
errorFile.error = '上传受到了安全方面的限制';
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
errorFile.error = '上传出现错误';
break;
default :
errorFile.error = '上传文件出错,错误代码:' + errorCode;
break;
}
queueErrorArray.push(errorFile);
}
/**
* 选择文件对话框关闭时触发,报告所选文件个数、加入上传队列文件数及上传队列文件总数
* @param numSelected 选择的文件数目
* @param numQueued 加入队列的文件数目
* @param numTotalInQueued 上传文件队列中文件总数
*/
function fileDialogComplete(numSelected, numQueued, numTotalInQueued) {
if (queueErrorArray && queueErrorArray.length) { //如果有错误文件
var table = $('
文件 | 大小 |
');
for (var i in queueErrorArray) {
var tr = $('
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标常用软件Flash频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号