uploadify文件上传

    Uploadify是JQuery的一个上传插件主要功能是批量上传文件

    支持单文件或多文件上传，可控制并发上传的文件数

    在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……

    通过参数可配置上传文件类型及大小限制

    通过参数可配置是否选择文件后自动上传

    易于扩展，可控制每一步骤的回调函数（onSelect, onCancel……）

    通过接口参数和CSS控制外观

 

引入uploadify的工具包

 

<link rel="stylesheet" href="<%=request.getContextPath()%>/js/uplodify/uploadify.css" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/uplodify/jquery.uploadify.min.js"></script>

  

  

 
<div id="attachs"></div>   //进度条显示
<input type="hidden" id="fujianIds" name="ids"/> //上传后地址保存在数据库返回的id集合，
<input type="file" id="file_upload" name="userAttach"/>

 <a href="javascrit:;" οnclick="javascript:$('#file_upload').uploadify('upload','*')" class="button icon add">上传</a>
		   <a href="javascrit:;" οnclick="javascript:$('#file_upload').uploadify('cancel', '*')" class="button icon add">取消上传</a>

 
 

<script type="text/javascript">

var v_attrchids= "";
$(document).ready(function() {
    $("#file_upload").uploadify({
        'auto':false,//是否自动上传
        'successTimeout':99999, //超时时间上传成功后，将等待服务器的响应时间: 单位：秒
       'formData':{
        //附带值 JSON对象数据，将与每个文件一起发送至服务器端。如果为动态值，请在onUploadStart()中使用settings()方法更改该JSON值
    	   },  
        'swf': "<%=request.getContextPath()%>/js/uplodify/uploadify.swf", //flash
        'queueID':'uploadfileQueue',//文件选择后的容器div的id值 
        'fileObjName':'userAttach',//要上传的文件名称 要与后台Action的文件名(hereFile)保持一致    
        'uploader':'<%=request.getContextPath()%>/user/uploadFile.do',//上传地址
        'buttonImage':'<%=request.getContextPath()%>/js/uplodify/background.jpg',//图片按钮
        //浏览按钮的大小
        'width':'150',
        'height':'25',
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允许上传的文件后缀
        'fileSizeLimit':'1000KB',//上传文件的大小限制允许上传文件的最大 大小单位(B, KB, MB, or GB)(0为没有限制)
        'queueSizeLimit' : 3,//允许上传的文件的最大数量。
        //选择上传文件后调用
        'onSelect' : function(file) {
              //alert("jljklj");    
        },
        //返回一个错误，选择文件的时候触发
            'onSelectError':function(file, errorCode, errorMsg){
            switch(errorCode) {
                case -100:
                    alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
                    break;
                case -110:
                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
                    break;
                case -120:
                    alert("文件 ["+file.name+"] 大小异常！");
                    break;
                case -130:
                    alert("文件 ["+file.name+"] 类型不正确！");
                    break;
            }
        },
        //检测FLASH失败调用
        'onFallback':function(){
            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
        },
        //上传到服务器，服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
        	var attach= eval("("+data+")");
        	v_attrchids += "," + attach.id;
        	$('#attachs').append('<span id="fujian_'+attach.id+'">'+'<img src=<%=request.getContextPath()%>'+attach.path+' height="50" width="50">'+'<a href="javascript:;" οnclick="delFujian('+attach.id+');">删除</a></span>');
        	$("#fujianIds").val(v_attrchids);
        },
        
      //当单个文件上传出错时触发
        'onUploadError': function (file, errorCode, errorMsg, errorString) { 
        //	alert("上传失败");
       // 	alert(文件 ["+file.name+"] + ' 上传失败: ' + errorString); 
        	} 
    });
});
  var basePath = "${ctx }";
  document.write("<script type='text/javascript' " 
          + "src='"+basePath+"/js/uploadify/jquery.uploadify-3.1.js?" + new Date()  
          + "'></s" + "cript>");
</script>

 

  后台处理

   uploadify是基于ajax

   

	


                private UserAttach userAttachDto =new UserAttach();
		
		private String ids;
		
	   //上传文件 必须与前jsp页面中uploadify中参数 'fileObjName':'demo1' 保持一致
		private File userAttach;
		//文件名 命名规则 按照 上传文件+ FileName 会自动匹配相应文件名
		private String userAttachFileName;
	
		
	    public void uploadFile(){
		//獲取當前要上傳的路徑
		String userAttachUrl = getServletContext().getRealPath(getProperty("uploadpath")); //上传地址
		if(userAttach!=null){
			String[] split = userAttachFileName.split("\\.");
		    String fileLastName=UUID.randomUUID().toString()+"pbw."+split[split.length - 1];
			FileUtil.upFile(userAttach, fileLastName, userAttachUrl);
			String Url=getProperty("uploadpath")+fileLastName;
			userAttachDto.setUserAttachUrl(Url);
			userAttachDto.setUserAttachName(fileLastName);
			System.out.println(Url);
			userService.insertUserAttach(userAttachDto);
			int id = userAttachDto.getId();//
			out("{\"id\":" + id + ",\"path\":\""+Url+ "\"}");
		}
	}