最近项目里面文件上传用得比较平凡,因而自己封装了一个简单的FileInput组件以方便开发。废话不多说了上代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="280" height="30">
<mx:Metadata>
[Event(name="uploadComplete",type="flash.events.Event")]
[Event(name="uploadIoError",type="flash.events.IOErrorEvent")]
[Event(name="uploadSecurityError",type="flash.events.SecurityErrorEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.net.FileReference;
import flash.net.URLVariables;
import flash.net.URLRequestMethod;
import flash.net.URLRequest;
private var _url:String;
private var _allowMaxSize:uint = 104857600;
private var _fileRef:FileReference;
private var _filter:Array;
private var _sendVars:URLVariables = new URLVariables();
public function set url(uploadUrl:String):void{
_url = uploadUrl;
}
public function set allowMaxSize(maxSize:uint):void{
_allowMaxSize = maxSize;
}
public function set filter(array:Array):void{
_filter = array;
}
public function set sendVars(Vars:URLVariables):void{
_sendVars = Vars;
}
private function browse():void{
Security.allowDomain("*");
_fileRef = new FileReference();
_fileRef.addEventListener(Event.SELECT,onSelect);
_fileRef.browse(_filter);
}
private function onSelect(evt:Event):void{
if(checkSize(_fileRef.size)){
fileName.text = _fileRef.name;
}else{
var msg:String = "";
msg = _fileRef.name + " 大小超过限制了! \n";
Alert.okLabel = '确定';
Alert.show(msg + "文件最大允许:" + formatFileSize(_allowMaxSize),'文件大小超过限制',Alert.OK).clipContent;
}
}
public function StartUpload():void{
_fileRef.addEventListener(Event.COMPLETE, onComplete);
_fileRef.addEventListener(IOErrorEvent.IO_ERROR, onIoError);
_fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);
var request:URLRequest = new URLRequest();
request.data = _sendVars;
request.url = _url;
request.method = URLRequestMethod.POST;
// _fileRef.upload(request,'file',false);
_fileRef.upload(request);
}
private function onComplete(event:Event):void {
this.dispatchEvent(new Event("uploadComplete"));
}
private function onIoError(evt:IOErrorEvent):void{
var event:IOErrorEvent = new IOErrorEvent("uploadIoError", false, false, evt.text);
this.dispatchEvent(event);
}
private function onSecurityError(evt:SecurityErrorEvent):void{
var event:SecurityErrorEvent = new SecurityErrorEvent("uploadSecurityError", false, false, evt.text);
this.dispatchEvent(event);
}
//检查文件大小
private function checkSize(size:Number):Boolean{
if(size > _allowMaxSize){
return false;
}
return true;
}
private function formatFileSize(size:Number):String{
if((1024 * 1024 * 1024) <= size){
return Math.round(size /(1024 * 1024 * 1024)) + "GB";
}else if((1024 * 1024) <= size){
return Math.round(size /(1024 * 1024)) + "MB";
}else if(1024 <= size){
return Math.round(size /1024) + "KB";
}else{
return size + "B";
}
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" fontSize="12">
<mx:TextInput x="3" y="3" width="201" id="fileName" editable="false"/>
<mx:Button x="206" y="3" label="浏览" id="browseBtn" click="browse()" icon="@Embed('/assets/add.png')"/>
</mx:Canvas>
</mx:Module>
Demo代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" xmlns:ux="com.flex.ux.*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import flash.net.FileFilter;
public function onComplete():void{
Alert.show('上传成功!','提示');
}
public function doIoError():void{
Alert.show('上传失败!','提示');
}
public function onSecurityError():void{
Alert.show('安全问题导致上传失败!','提示');
}
private var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png)", "*.jpg; *.jpeg; *.gif; *.png");
private var documentTypes:FileFilter = new FileFilter("Documents (*.pdf)",("*.pdf"));
private var array:Array = new Array(imageTypes,documentTypes);
]]>
</mx:Script>
<mx:Panel width="400" height="200" layout="absolute" horizontalCenter="0" verticalCenter="0" title="文件上传组件Demo">
<mx:Canvas x="0" y="0" width="100%" height="100%">
<ux:FileInput x="44" y="23" id="fileInput" uploadSecurityError="onSecurityError()" uploadIoError="doIoError()" uploadComplete="onComplete()" url="http://localhost:8080/TEST/upload/UploadAction!upload.action"/>
<ux:FileInput x="44" y="53" id="imgInput" filter="{array}" uploadSecurityError="onSecurityError()" uploadIoError="doIoError()" uploadComplete="onComplete()" url="http://localhost:8080/TEST/upload/UploadAction!upload.action"/>
<mx:Button x="49" y="109" label="上传1" click="{fileInput.StartUpload();}"/>
<mx:Button x="159.5" y="109" label="上传2" click="{imgInput.StartUpload();}"/>
</mx:Canvas>
</mx:Panel>
</mx:Application>
java + struts2后台代码:
UploadUtil
package com.io.fileupload;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
public class UploadUtil {
/**
*
* @param fileName
* @return fileName
* 根据当前日期时间随即产生文件名
*
*/
public static String generateFileName(String fileName) {
DateFormat df = new SimpleDateFormat("yyMMddHHmmss");
String formatDate = df.format(new Date());
int rand = new Random().nextInt(10000);
int position = fileName.lastIndexOf(".");
String extension = fileName.substring(position);
return formatDate + rand + extension;
}
}
/**
*
*/
package com.io.fileupload;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import com.ajax.base.action.BaseAction;
/**
* @author 刘洪 2010-3-22
*
*/
@SuppressWarnings("serial")
public class UploadAction extends BaseAction {
private File Filedata;
private String contentType;
private String filename;
@SuppressWarnings("deprecation")
public String upload() throws Exception{
String realPath = ServletActionContext.getRequest().getRealPath("/upload");
String tname = UploadUtil.generateFileName(this.filename);
// String tdir = realPath + "\\" + tname;
/* long s = this.Filedata.length();
String size = "";
if((1024 * 1024 * 1024) <= s){
size = s /(1024 * 1024 * 1024) + "GB";
}else if((1024 * 1024) <= s){
size = s /(1024 * 1024) + "MB";
}else if(1024 <= s){
size = s /1024 + "KB";
}else{
size = s + "B";
}*/
File targetfile = new File(realPath, tname);
FileUtils.copyFile(Filedata, targetfile);
this.ajaxResponse.setAjaxResponse("上传成功");
return "ajax_response";
}
public File getFiledata() {
return Filedata;
}
public void setFiledata(File filedata) {
Filedata = filedata;
}
public String getContentType() {
return contentType;
}
public void setContentType(String contentType) {
this.contentType = contentType;
}
public String getFilename() {
return filename;
}
public void setFilename(String filename) {
this.filename = filename;
}
public void setFiledataFilename(String filename) {
this.filename = filename;
}
public void setFiledataContentType(String contentType) {
this.contentType = contentType;
}
}
- 大小: 14.1 KB
分享到:
相关推荐
Bootstrap文件上传组件FileInput是一款强大的前端文件上传工具,尤其适合于需要实现文件批量上传的场景。这个组件基于Bootstrap框架,提供了美观的用户界面和丰富的功能,使得文件上传操作变得直观且易于实现。以下...
Bootstrap FileInput 是一个流行的前端文件上传插件,它与 Bootstrap 框架完美结合,提供了丰富的功能和美观的用户界面。这个插件不仅支持单选文件上传,还支持多选,以及预览不同类型的文件(如图片、文档、音频、...
Fileinput 是一个基于Bootstrap的文件上传组件,它为用户提供了友好的文件选择和上传体验。 在ASP.NET MVC项目中,使用Bootstrap Fileinput可以创建美观且功能丰富的文件上传界面。以下是一些关键知识点: 1. **...
总结来说,Bootstrap-fileinput上传组件通过"fileinput-all.css"解决了样式冲突问题,提供了丰富的自定义选项,实现了美观的文件上传界面和流畅的用户体验。在实际开发中,合理配置和使用这个组件,能够提升网站的...
Bootstrap-fileinput是一款强大的基于jQuery和Bootstrap的文件上传组件,它为网页应用提供了美观且功能丰富的文件选择、预览和上传体验。这款插件不仅支持单个文件上传,还能处理批量文件上传,同时还提供了拖放上传...
Bootstrap FileInput是一款强大的文件上传...你可以解压并参考其中的代码,学习如何在项目中集成和定制Bootstrap FileInput组件,实现自己的文件上传功能。记得根据实际需求调整配置选项,确保用户体验的顺畅和安全。
Bootstrap-fileinput 是一款基于Bootstrap框架的高级文件上传插件,它极大地丰富了文件上传的样式和功能,使得在Web应用中实现美观且易用的文件上传功能变得简单易行。这款组件不仅支持单个文件上传,还允许用户一次...
在本文中,我们将深入探讨如何在Bootstrap环境中使用fileinput组件实现多图片上传和编辑功能。Bootstrap-fileinput 是一个增强型的HTML5文件输入插件,它提供了丰富的自定义选项和功能,包括预览、上传、删除等。这...
Bootstrap文件上传插件Bootstrap-FileInput是一款流行的前端文件上传组件,尤其在基于Bootstrap设计的项目中广泛应用。这个组件提供了一种美观、用户友好的方式来处理文件上传功能,支持多文件选择、预览、拖放操作...
Bootstrap-fileinput 是一款高度可定制化的前端文件上传控件,基于流行的前端框架Bootstrap构建,提供了丰富的功能和良好的用户体验。这款控件特别适用于那些需要处理用户上传文件的Web应用,如图片上传、文档上传等...
Bootstrap Fileinput是一款强大的文件上传组件,它为HTML5的`<input type="file">`提供了丰富的功能和美观的界面。这个组件特别适用于那些需要增强上传体验的网站或应用,包括多文件选择、预览、进度条显示、错误...
Bootstrap FileInput是一款强大的文件上传组件,它为网页应用提供了美观且功能丰富的文件选择、预览和上传功能。这款插件是基于流行的前端框架Bootstrap构建,因此它可以无缝地融入Bootstrap主题,提供一致的用户...
在Vue.js中实现文件上传功能,通常会借助组件化开发,这样可以提高代码的复用性和可维护性。本文将深入探讨如何在Vue.js中创建一个文件上传组件,以及涉及的相关技术点。 首先,我们需要了解HTML5中的`...
在本文中,我们将深入探讨如何使用Bootstrap FileInput,这是一个功能强大的文件上传组件,以其美观的样式和丰富的功能而受到广泛欢迎。Bootstrap FileInput支持多种高级特性,如文件预览、AJAX同步或异步上传以及...
使用bootstrap的fileinput插件js,实现多文档上传。
"Bootstrap fileinput文件上传组件使用详解" Bootstrap fileinput文件上传组件是基于Bootstrap框架的文件上传控件,提供了强大且灵活的文件上传功能。下面将详细介绍Bootstrap fileinput文件上传组件的使用方法。 ...
上述代码通过监听fileinput上传控件的两个事件(`fileuploaded`和`filesuccessremove`),将文件上传成功后服务器返回的数据与前端界面元素关联,并在文件移除时删除服务器上的文件记录和前端的文件预览。...