Flash上传组件之SWFUpload文件上传

2019独角兽企业重金招聘Python工程师标准>>>

一、什么是SWFUpload？

SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。

目前此项目放在：https://code.google.com/p/swfupload/

对应的中文API：http://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" %>
<html>
<head><title>swfUpload上传文件（Java和Jquery）</title><script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script><script type="text/javascript" src="swfupload/swfupload.js"></script><link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="swfPlaceHold">
</div>
<ol id="fileList">
</ol>
<input type="button" value="上传" id="submit">
</body>
<script type="text/javascript" src="swfupload/swfuploadHandlers.js"></script>
</html>

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",         //文件上传的大小单位默认为KBfile_upload_limit: 0,//debugdebug: false,//handlersfile_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,         //上传成功时触发的事件//buttonbutton_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 = "<li id='" + file.id + "'>";listItem += "文件：<em>" + file.name + "</em>(" + Math.round(file.size / 1024) + "KB)<span id='progressValue'></span>";listItem += "<div id='progressBar'><div id='progress'></div></div>";listItem += "<p id='statue'></p><span id='cancle'></span></li>";$("#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 = $('<table><tr><td>文件</td><td>大小</td></tr></table>');for (var i in queueErrorArray) {var tr = $('<tr></tr>');var info = '<td>' + queueErrorArray[i].file.name + '<span style="color:red">(' + queueErrorArray[i].error + ')</span></td>'+ '<td>' + queueErrorArray[i].file.size + 'bytes</td>';table.append(tr.append(info));}$('body').append(table);} else {this.startUpload();             //开始上传
    }}/*** 文件上传触发的事件* @param file一个文件对象*/
function uploadStar(file) {if (file) {$('#fileList li#' + file.id).find('p#statue').text("上传中。。。。。");$('#fileList li#' + file.id).find('p#progress').width("0%");}
}/***文件上传过程Flash定时调用的方法用来返回当前上传的进度* @param file 上传文件对象* @param byteCompleted 上传的字节* @param byteTotal 总的字节*/
function uploadprogress(file, byteCompleted, byteTotal) {var percentByte = Math.round((byteCompleted / byteTotal) * 100);    //当前进度$('#fileList li#' + file.id).find('span#progressValue').text(percentByte + "%");$('#fileList li#' + file.id).find('div#progress').css('width', percentByte + '%');}/*** 文件上传完毕并且服务器返回200状态码时触发* @param file 上传的文件* @param serverData* @param response*/
function uploadSuccess(file, serverData, response) {var $item = $("#fileList li#" + file.id);$item.find('div#progress').css('width', '100%');$item.find('span#progressValue').css('color', 'blue').text('100%');$item.find('p#statue').html('上传完成!').css('color', 'green');
}/*** 在一个上传周期结束后触发(uploadError及uploadSuccess均触发)* 在此可以开始下一个文件上传(通过上传组件的uploadStart()方法)* @param file 上传完成的文件对象*/
function uploadComplete(file) {//判断队列中还有没有文件if (this.getStats().files_queued > 0) {this.startUpload();} else {this.cancelUpload(this.fileProgressID);$("#fileList li").remove();}
}/********************************按钮事件绑定*********************************************/
$('#submit').click(function () {swfup.startUpload();
});

后台对应处理的Servlet

package com.zxd.tool;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import java.io.*;
import java.util.List;
import java.util.UUID;/*** Created by zhang on 14-2-25.*/
@WebServlet("/upload")
public class Upload extends HttpServlet {private File tempDir;   //临时路径private File saveDir;   //保存路径/*** servlet初始化事件** @param config* @throws ServletException*/public void init(ServletConfig config) throws ServletException {String uploadPath = config.getServletContext().getRealPath("/");StringBuffer sb = new StringBuffer(uploadPath);saveDir = new File(sb.append("\\upload").toString());tempDir = new File(sb.append("\\temp").toString());if (!saveDir.exists()) {saveDir.mkdir();}if (!tempDir.exists()) {tempDir.mkdir();}}public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {DiskFileItemFactory factory = new DiskFileItemFactory();factory.setSizeThreshold(1 * 1024 * 1024);      //设置缓冲区大小factory.setRepository(tempDir);             //设置临时保存目录ServletFileUpload sfu = new ServletFileUpload(factory); //Servelt文件上传对象sfu.setFileSizeMax(200 * 1024 * 1024);  //200Msfu.setHeaderEncoding("utf-8");List<FileItem> list = null;try {list = sfu.parseRequest(request);       //得到文件} catch (FileUploadException e) {e.printStackTrace();}int size = list.size();for (int i = 0; i < size; i++) {//循环保存文件FileItem file = list.get(i);if (file.isFormField()) {   //如果是表单字段String name = file.getFieldName();  // 获得该字段名称String value = file.getString("utf-8"); //获得该字段值} else {String extName = file.getName().substring(      //得到扩展名file.getName().lastIndexOf("."));String fname = UUID.randomUUID()+extName;try {file.write(new File(saveDir, fname));  // 写入文件} catch (Exception e) {e.printStackTrace();}}}}

这就是swfupload的一些基本的参数和用法。

转载于:https://my.oschina.net/u/212572/blog/795995

Flash上传组件之SWFUpload文件上传相关推荐

java swf 上传文件_Flash上传组件之SWFUpload文件上传
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式. 由 ...
php swfupload handlers.js,SWFUpload 文件上传插件常用的配置讲解
上传文件swfUpload 插件: 基本的文件上传涉及到的四个文件 (还有一个处理数据的php文件这里没有涉及到) html页面: upload_window.html js文件: swfupl ...
使用饿了么update组件实现多文件上传到后台以及本地图片显示功能
使用饿了么update组件实现多文件上传到后台以及本地图片显示功能查了很多博客,终于弄出来了.我就大概说一下.我的业务内容是要把一个表单统一上传上去,而且其中有字段也有图片. <div cl ...
前端基于element组件的语音文件上传
前端基于element组件的语音文件上传原理项目采用的是element组件的UI库,基于标签,实现基本的文件上传功能,并基于标签内置的触发事件,实现了对语音文件大小,格式,上传前确认,上传后显示已 ...
el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数
el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数 <el-table-columnlabel="附件"align="center& ...
jquery文件上传插件 uploadify java_jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持 Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小. ...
文件上传linux服务器,Linux 文件上传Linux服务器
进入命令行在图形化桌面出现之前,与Unix系统进行交互的唯一方式就是借助由shell所提供的文本命令行界面(command line interface,CLI).CLI只能接受文本输入,也只能显示 ...
00截断上传绕过_【文件上传与解析】文件上传与解析漏洞总结v1.0
点击上方"公众号" 可以订阅哦! Hello,各位小伙伴晚上好~ 这里是依旧勤劳写公众号的小编~ 今天本公众号将推出一个新的模块,那就是漏洞知识点总结模块!!!(此处应有掌声~) ...
asp.net实现ftp上传代码(解决大文件上传问题)
asp.net实现ftp上传代码(解决大文件上传问题) 参考文章: (1)asp.net实现ftp上传代码(解决大文件上传问题) (2)https://www.cnblogs.com/LYunF/ar ...

Flash上传组件之SWFUpload文件上传

Flash上传组件之SWFUpload文件上传相关推荐

最新文章

热门文章