zoukankan      html  css  js  c++  java
  • 文件异步上传,多文件上传插件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");//返回到页面的数据,此处随便返回一个图片路径
    	}
    

     以上即可。

  • 相关阅读:
    linux ubuntu 中文汉化
    微信内核浏览器一些用法
    struts2解耦和获取提交的值
    html背景图片自适应
    Heroku 云服务部署流程
    mac 遇到的奇怪问题?
    h5完美实现无刷新上传并附带上传效果
    ionic 实现 应用内(webview中html页面点击) 和 应用外 (浏览器html页面点击) 打开本地安装应用
    ionic 实现微信朋友圈分享的完整开发流程
    OpenGL ES学习笔记(三)——纹理
  • 原文地址:https://www.cnblogs.com/chyg/p/4154771.html
Copyright © 2011-2022 走看看