下面是上传主页面
<!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 = [];//存储附件的IDvar 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, //文件选择框的iddataType:'text',//服务器返回的格式，可以是jsonsuccess: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, MAXHEIGHT, img.offsetWidth, 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项目下 可直接运行
如果困难是地上的荆棘，我们脱掉鞋子，光着脚笑笑，
