ajaxFileUpload结合图片预览可控制上传的张数

下面是上传主页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax_upload.html</title>
    <!-- 注：jquery 必须放到ajaxfileupload.js前面来，否则使用不了 -->
    <script src="jQuery.v1.4.2.js"></script>
	<script src="ajaxfileupload.js"></script>
	<!-- 注：js数组的扩展函数 -->
	<script src="array_extend.js"></script>
    <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">

var addfileIds = [];//存储附件的ID
var pre_view_count = 1;//预览元素索引初始值
var max_view_count = 4;//定义图片上传最大值（即：上传最多张数）
//index 只是区分一下，比如页面有很多个上传控件时  就需要用到
function ajaxFileUpload(index){
	if(addfileIds.length > max_view_count -1 ){
		alert("图片最多只能上传"+max_view_count+"张!");
		return false;
	}
	$("#pre_tr").append("<td id='preview_td_"+pre_view_count+"'><div id='preview"+pre_view_count+"'></div></td>");
	//等待图片
	$(".wait"+index).show();
    $.ajaxFileUpload({
     url:'upload.jsp',//上传到哪里   这边只是测试，返回一个数字，具体业务逻辑需要去开发
     secureuri:false,fileElementId:'picFile'+index,//文件选择框的id
     dataType:'text',//服务器返回的格式，可以是json
     success:function(data,status){  //相当于java中try语句块的用法
     	 $(".wait"+index).hide();
     	// alert(data)
    	 var evda = eval('('+ data +')');
     	 var jsonda = evda.msg;
     	//  alert(jsonda.id);
     	 if(jsonda.id=="out"){//如果超出附件大小，这边会填上标志和附件大小
     	 	alert("附件超过"+jsonda.path+"M,不能上传!");
     	 	return;
     	 }
     	 if(jsonda.id=="format"){
     	 	alert("您上传的格式有误!");
     	 	return;
     	 }
     	 var str = "del('"+jsonda.id+"',"+pre_view_count+")";
     	 var imgeStr = '<img style="cursor: pointer;"  onclick='+str+' src="hnbc2013_delete.png">';
      	 $("#preview_td_"+pre_view_count).append('<span id="'+jsonda.id+'">'+jsonda.fileName+""+imgeStr+"</span><br/>");
     	 addfileIds.push(jsonda.id);
     	 pre_view_count ++;//数组索引增加
     },error:function(data,status,e){            //相当于java中catch语句块的用法
     	 alert(data.msg);
         $('#attach'+index).html('添加失败');
     }
 });
}


  //图片上传预览    IE是用了滤镜。
 function previewImage(file)
 {
	if(addfileIds.length > max_view_count -1 ){
	 	 return false;
	}
	   var MAXWIDTH  = 160; 
	   var MAXHEIGHT = 100;
	   var div1 = document.getElementById('preview'+pre_view_count);
	   if (file.files && file.files[0])
	   {
	       div1.innerHTML ='<img id=imghead'+pre_view_count+'>';
	       var img = document.getElementById('imghead'+pre_view_count);
	       img.onload = function(){
	         var rect = clacImgZoomParam(MAXWIDTH,MAXHEIGHT,img.offsetWidth,img.offsetHeight);
	         img.width  =  rect.width;
	         img.height =  rect.height;
	         img.style.marginTop = rect.top+'px';
	       }
	       var reader = new FileReader();
	       reader.onload = function(evt){img.src = evt.target.result;}
	       reader.readAsDataURL(file.files[0]);
	   }
	   else //兼容IE
	   {
	     var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaimageLoader(sizingMethod=scale,src="';
	     file.select();
	     var src = document.selection.createrange().text;
	     div1.innerHTML = '<img id=imghead>';
	     var img = document.getElementById('imghead');
	     img.filters.item('DXImageTransform.Microsoft.AlphaimageLoader').src = src;
	     var rect = clacImgZoomParam(MAXWIDTH,img.offsetHeight);
	     status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
	     div1.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
	   }
 }
 function clacImgZoomParam( maxWidth,maxHeight,width,height ){
     var param = {top:0,left:0,width:width,height:height};
     if( width>maxWidth || height>maxHeight )
     {
         rateWidth = width / maxWidth;
         rateHeight = height / maxHeight;
         
         if( rateWidth > rateHeight )
         {
             param.width =  maxWidth;
             param.height = Math.round(height / rateWidth);
         }else
         {
             param.width = Math.round(width / rateHeight);
             param.height = maxHeight;
         }
     }
     
     param.left = Math.round((maxWidth - param.width) / 2);
     param.top = Math.round((maxHeight - param.height) / 2);
     return param;
}
        
function del(id,img_view_index){
	//需要自己 去java后台删除对应的附件数据 和 文件
	//var url = "${basepath}/uploadAction!deleteFile.html?fjId="+id;
	//$.get(url,{},function(data){
	//		$("#"+id).remove();
	//		
	//});
	addfileIds.removeObj(id);
	alert(addfileIds.join())
	$("#preview_td_"+img_view_index).remove();
}
</script>
</head>
<!-- 预览图片样式 -->
<style type="text/css">
#preview{width:160px;height:110px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaimageLoader(sizingMethod=image);}
</style> 
  <body>
   <input name="picFile" onchange="ajaxFileUpload(1,'申请报告');previewImage(this);" id="picFile1"  style="height: 30px;width: 350px" type="file" />
   <img src="hnbc2013wait.gif"  class="wait1" style="display: none">
   <br/>
   <table width="1000px">
		<tr id="pre_tr">
		</tr>
   </table>
  </body>
</html>

相关js文件在附件，附件直接下载放在Web项目下可直接运行

这边是上传的处理地址JSP,模拟生成ID

<%@ page language="java" pageEncoding="utf-8"%>
<%
//模拟附件生成的ID 我这边是把所有附件弄得一张表 然后和主表进行关联
int uInt = (int)(Math.random()*1000+1);
out.print("{'success':'"+true+"','msg':{'id':'"+uInt+"','fileName':'上传文件名'}}");
%>

ajaxFileUpload结合图片预览可控制上传的张数

相关文章