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

本文中使用java作为例子

uploadify下载 https://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");//返回到页面的数据,此处随便返回一个图片路径
	}

 

 以上即可。

 

posted @ 2014-12-10 10:04  晨羲  阅读(296)  评论(0编辑  收藏  举报