文件异步上传,多文件上传插件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");//返回到页面的数据,此处随便返回一个图片路径 }
以上即可。