文件异步上传,多文件上传插件uploadify

本文中使用java作为例子

uploadify下载 http://files.cnblogs.com/chyg/uploadify.zip

jsp页面中需要引入:

<script type="text/javascript" src="jquery.uploadify.js"></script>

  

主要js代码:

$("#sysLogo").uploadify({
                    ‘uploader‘: ‘${ctx}/web/module/config/configupload/uploadSysLog.action‘,//文件上传action
                  //  ‘script‘: ‘${ctx}/web/module/config/configupload/uploadSysLog.action‘,
                  	‘swf‘      : ‘uploadify.swf‘,
                    ‘cancelImg‘: ‘cancel.png‘,
                    ‘folder‘: ‘UploadFile‘,
                    ‘queueID‘: ‘fileQueue‘, //上传队列id
                    ‘fileObjName‘ : ‘sysLogoFiles‘, //后台获取的文件名称,
                    ‘auto‘: true,//是否自动上传
                    ‘multi‘: true, //是否支持多选
                    ‘onUploadSuccess‘ : function(file, data, response) { //上传成功后执行
                    	alert("sucess");
                    	console.log(file);
                    	console.log("data:"+data);
                    }
                });

//注:上面只是部分参数,uploadify还有很多参数,具体请自动搜索api

  

jsp页面:

		                    <div class="controls">
		                        <input type="file" id="sysLogo" name="sysLogoFile" >
		                        <div id="fileQueue"></div>
		                    </div>

 java代码:

	public void uploadSysLog() throws IOException{
		System.out.println(sysLogoFiles);  //sysLogoFiles为全局变量,List<File>

		OutputStream fileOutputStream = null;
		InputStream in = null;
		File file = new File("d:/abc.jpg"); // 新建文件
		try {
			fileOutputStream = new FileOutputStream(file); // 创建文件流
			in = new FileInputStream(sysLogoFiles.get(0));
			int bytesRead = 0;
			byte data[] = new byte[1024 * 1024]; // 用于存放流数据
			while ((bytesRead = in.read(data)) > 0) {
				fileOutputStream.write(data, 0, bytesRead); // 写入文件流
			}
		} catch (RuntimeException e) {
			e.printStackTrace();
		} finally {
			if (fileOutputStream != null) {
				fileOutputStream.close();
				fileOutputStream = null;
			}
			if (in != null) {
				in.close();
				in = null;
			}
		}

		getResponse().getWriter().write("uploadify-cancel.png");//返回到页面的数据,此处随便返回一个图片路径
	}

 以上即可。

时间: 2024-08-14 21:27:54

文件异步上传,多文件上传插件uploadify的相关文章

文件上传之——用SWF插件实现文件异步上传

之前提高过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Flash. 最近一直在用MVC,所以还是以MVC举例:先来张效果图: UploadIndex2.cshtml代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&q

JQUery利用Uploadify插件实现文件异步上传(十一)

一:简介: Uploadify是JQuery的一个上传插件,实现的效果非常好,带进度显示 ,且Ajax异步,能一次性上传多个文件,功能强大,使用简单 1.支持单文件或多文件上传,可控制并发上传的文件数 2.在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 3.通过参数可配置上传文件类型及大小限制 4.通过参数可配置是否选择文件后自动上传 5.易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……) 6.通过接口参数和CSS控制外观 二:官方下载 htt

百度 flash html5自切换 多文件异步上传控件webuploader基本用法

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核,增加标签

使用AjaxFileUpload.js实现文件异步上传

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"

HTML5实现图片文件异步上传

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这边的效果预览: 1.文件未选择 2.文件已选择 HTML代码部分: 思路:下面代码中我利用css的z-index属性将input="file"标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框.下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮. <div id

[html5+java]文件异步读取及上传核心代码

html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3.java端接受 核心代码: 1.拖拽代码段: 1 <div id="dropzone"> 2 <div>Drag & drop your file here...</div> 3 <div id='showFile'></di

关于异步文件上传和文件表单元素的复制、设置和清除

一.解决文件异步上传的方法有3种:1.使用iframe 2.使用FormData(html5新功能)  3.使用flash 1.使用iframe 原来我以为使用iframe是把整个表单复制到iframe里面,然后把iframe里面的表单提交给服务器,这样来实现表单的异步上传.最后我想错了,实现原理比我想的要简单的多.先看一下代码: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <

SpringMVC + AJAX 实现多文件异步上传

转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇文章中所用到的项目,需要的朋友可以点击前面的链接查看.在这里只贴出关键代码. 首先我们要准备一个 JS 文件,即:ajaxfileupload.js,它需要用到 jQuery,所以我们还需要准备 jQuery 的库,两个文件在文末尾都有链接提供下载. JSP 关键代码: <li> <div&

文件的上传(表单上传和ajax文件异步上传)

一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file1" /><br /> <input type="submit" value="上传&q

HTML5+J2EE实现文件异步上传

P.S. HTML5经过了W3C的8年努力,终于正式推广了.这次升级最大的就是升级了XMLHTTPRequest,让它变成了XMLHTTPRequest Level II(这有啥奇怪的?).这个对象现在非常强大,可能会让所有使用jQuery的人全部重新拾起HTML原生的ajax技术. 闲话扯到这,接着是主题:我们今天要实现的就是下面的效果: 这里面文件名.文件大小和MIME都是在选择文件时读取和现实,然后点击上传之后,上传进度实时显示,最后弹出右边的对话框确认文件信息(当然这里我为了方便直接把文