`
Merrygrass
  • 浏览: 166550 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

自己封装的Flex文件上传组件FileInput

阅读更多

最近项目里面文件上传用得比较平凡,因而自己封装了一个简单的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
1
0
分享到:
评论

相关推荐

    bootstrap 文件上传组件 fileinput 实现文件批量上传

    Bootstrap文件上传组件FileInput是一款强大的前端文件上传工具,尤其适合于需要实现文件批量上传的场景。这个组件基于Bootstrap框架,提供了美观的用户界面和丰富的功能,使得文件上传操作变得直观且易于实现。以下...

    bootstrapfileinput实现文件自动上传

    Bootstrap FileInput 是一个流行的前端文件上传插件,它与 Bootstrap 框架完美结合,提供了丰富的功能和美观的用户界面。这个插件不仅支持单选文件上传,还支持多选,以及预览不同类型的文件(如图片、文档、音频、...

    asp.net mvc+Bootstrap Fileinput框架实现的文件上传

    Fileinput 是一个基于Bootstrap的文件上传组件,它为用户提供了友好的文件选择和上传体验。 在ASP.NET MVC项目中,使用Bootstrap Fileinput可以创建美观且功能丰富的文件上传界面。以下是一些关键知识点: 1. **...

    bootstrap-fileinput上传组件

    总结来说,Bootstrap-fileinput上传组件通过"fileinput-all.css"解决了样式冲突问题,提供了丰富的自定义选项,实现了美观的文件上传界面和流畅的用户体验。在实际开发中,合理配置和使用这个组件,能够提升网站的...

    bootstrap-fileinput文件上传组件

    Bootstrap-fileinput是一款强大的基于jQuery和Bootstrap的文件上传组件,它为网页应用提供了美观且功能丰富的文件选择、预览和上传体验。这款插件不仅支持单个文件上传,还能处理批量文件上传,同时还提供了拖放上传...

    bootrap fileinput文件上传实例

    Bootstrap FileInput是一款强大的文件上传...你可以解压并参考其中的代码,学习如何在项目中集成和定制Bootstrap FileInput组件,实现自己的文件上传功能。记得根据实际需求调整配置选项,确保用户体验的顺畅和安全。

    bootstrap-fileinput-master(文件上传)

    Bootstrap-fileinput 是一款基于Bootstrap框架的高级文件上传插件,它极大地丰富了文件上传的样式和功能,使得在Web应用中实现美观且易用的文件上传功能变得简单易行。这款组件不仅支持单个文件上传,还允许用户一次...

    Bootstrap中的fileinput 多图片上传及编辑功能

    在本文中,我们将深入探讨如何在Bootstrap环境中使用fileinput组件实现多图片上传和编辑功能。Bootstrap-fileinput 是一个增强型的HTML5文件输入插件,它提供了丰富的自定义选项和功能,包括预览、上传、删除等。这...

    bootstrap文件上传bootstrap-fileinput

    Bootstrap文件上传插件Bootstrap-FileInput是一款流行的前端文件上传组件,尤其在基于Bootstrap设计的项目中广泛应用。这个组件提供了一种美观、用户友好的方式来处理文件上传功能,支持多文件选择、预览、拖放操作...

    bootstrap-fileinput-master 上传控件

    Bootstrap-fileinput 是一款高度可定制化的前端文件上传控件,基于流行的前端框架Bootstrap构建,提供了丰富的功能和良好的用户体验。这款控件特别适用于那些需要处理用户上传文件的Web应用,如图片上传、文档上传等...

    Bootstrap Fileinput文件上传组件用法详解

    Bootstrap Fileinput是一款强大的文件上传组件,它为HTML5的`&lt;input type="file"&gt;`提供了丰富的功能和美观的界面。这个组件特别适用于那些需要增强上传体验的网站或应用,包括多文件选择、预览、进度条显示、错误...

    bootstrap fileinput完整插件

    Bootstrap FileInput是一款强大的文件上传组件,它为网页应用提供了美观且功能丰富的文件选择、预览和上传功能。这款插件是基于流行的前端框架Bootstrap构建,因此它可以无缝地融入Bootstrap主题,提供一致的用户...

    Vuejs的文件上传组件

    在Vue.js中实现文件上传功能,通常会借助组件化开发,这样可以提高代码的复用性和可维护性。本文将深入探讨如何在Vue.js中创建一个文件上传组件,以及涉及的相关技术点。 首先,我们需要了解HTML5中的`...

    bootstrap fileinput完整实例分享

    在本文中,我们将深入探讨如何使用Bootstrap FileInput,这是一个功能强大的文件上传组件,以其美观的样式和丰富的功能而受到广泛欢迎。Bootstrap FileInput支持多种高级特性,如文件预览、AJAX同步或异步上传以及...

    文件上传js bootstrap fileinput

    使用bootstrap的fileinput插件js,实现多文档上传。

    Bootstrap fileinput文件上传组件使用详解

    "Bootstrap fileinput文件上传组件使用详解" Bootstrap fileinput文件上传组件是基于Bootstrap框架的文件上传控件,提供了强大且灵活的文件上传功能。下面将详细介绍Bootstrap fileinput文件上传组件的使用方法。 ...

    Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置

    上述代码通过监听fileinput上传控件的两个事件(`fileuploaded`和`filesuccessremove`),将文件上传成功后服务器返回的数据与前端界面元素关联,并在文件移除时删除服务器上的文件记录和前端的文件预览。...

Global site tag (gtag.js) - Google Analytics