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