现在页面完成无刷新和服务器交互,都是用ajax完成了,但是在ajax中使用的XMLHttpRequest接受的是字符串类型。如果使用ajax技术上传二进制文件(如图片),就要做些修改了。
实际上在ajax技术大量使用前,局部刷新都是iframe完成了。
项目里要求完成了一个,图片无刷新批量上传,并且在上传前可以在客户端预览的功能。上代码:
首先在uploadphoto.jsp页面定义一个完成批量上传图片table:
<table width="100%" style="width:850px" class='perTab' > <tr> <td colspan='2' align="center"> <input type="hidden" name='coverFile' id='coverFile' value='' /> <div id="div_iframe" style="width:100%;height:257px" align="center" > <iframe name='hiddenFrame' frameborder='0' scrolling="no" width="100%" height='100%' id="hiddenFrame" > </iframe> </div> </td> </tr> <tr> <th align="right"> 选择图片: </th> <td width="75%"> <div id="idPicFile"> <input type="button" οnclick="addTr();" value="增加" class='middlebutton'> </div> </td> </tr> <tr> <td colspan="3"> <input type='hidden' value='2002' name='beginYear' id="beginYear"/> <table > <thead> <tr > <th width="30%"> 选择年份 </th> <th> 文件路径 </th> <th width="30%"> 预览图 </th> <th width="20%"> 操作 </th> </tr> </thead> <tbody id="idPicList" align="center"> <tr id='tr_1'> <td> <select id="yearPhoto[0]" name="uploadFile[0].yearPhoto"></select> </td> <td> <input type=file name="uploadFile[0].file" id="doca" οnchange="javascript:setImagePreview();"> </td> <td align="center"> <div id="localImag"> <img id="preview" width=-1 height=-1 style="diplay: none" /> </div> </td> <td align="center"><a href="#" οnclick="removePic()">清除</a><span id="msg"></span></td> </tr> </tbody> </table> </td> </tr> </table>
其中在<table>中定义了一个<div>,<div>用于显示iframe。这样每次上传图片刷新的都是这个iframe,而不是全部页面。
图片页面提交js:
定义提交的form表单是 “multipart/form-data” 二进制形式,
form.target 表示提交后显示的新页面显示位置,我们自己定义显示在div中的iframe中,这样边完成了页面的局部刷新。
var formPhoto=document.getElementById("infobackupForm"); formPhoto.encoding="multipart/form-data"; formPhoto.method='post'; formPhoto.target='hiddenFrame'; formPhoto.action='infobackup.do?method=yearPhoto'; var savePho=document.getElementById("savePhot"); savePho.disabled="disabled"; formPhoto.submit();
在table里,form数组实现了批量上传图片:
form数组: <input type=file name="uploadFile[0].file" id="doca" οnchange="javascript:setImagePreview();">
这中写法,在form表里,我们需要定义一个变量名为uploadFile的model,struts框架会自动执行 getUploadFile(x).setFile(xxx);
form表单中:
public UploadFile getUploadFile(int index) { int size = formFiles.size(); if (index > size - 1) { for (int i = 0; i < index - size + 1; i++) { formFiles.add(new UploadFile()); } } return (UploadFile) formFiles.get(index); }
model:
public class UploadFile implements Serializable { private FormFile file; private String yearPhoto; public FormFile getFile() { return file; } public void setFile(FormFile file) { this.file = file; } public void setYearPhoto(String yearPhoto){ this.yearPhoto=yearPhoto; } public String getYearPhoto(){ return this.yearPhoto; } }
上传前预览图片,预览图显示在div中
<div id="localImag">
<img id="preview" width=-1 height=-1 style="diplay: none" />
</div>
js触发预览事件:
对应火狐浏览器,用img标签的src属性完成预览, imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
对应iE浏览器,则是图片显示在div中
var docObj = document.getElementById("doca");
docObj.select();
var imgSrc = document.selection.createRange().text;
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
function setImagePreview() { var docObj = document.getElementById("doca"); var imgObjPreview = document.getElementById("preview"); if (docObj.files && docObj.files[0]) { imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '300px'; imgObjPreview.style.height = '120px'; imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } else { var fso=new ActiveXObject("Scripting.FileSystemObject"); var file=fso.GetFile(docObj.value); //window.onerror = window.oldOnError; if (file.Size/1024>300) { alert("上传文件不能大于3k!") ; docObj.outerHTML=docObj.outerHTML.replace(/(value=\").+\"/i,"$1\""); return false; } docObj.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById("localImag"); localImagId.style.width = "100px"; localImagId.style.height = "100px"; try { localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch (e) { alert("您上传的图片格式不正确,请重新选择!"); return false; } imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; }
上传完图片,把formFile置空,可以用正则表达式: docaFile.outerHTML=docaFile.outerHTML.replace(/(value=\").+\"/i,"$1\"");
每次增加行js事件:
//增加行 function addTr(){ var tbody=document.getElementById('idPicList'); var tr=document.createElement("tr"); var td1=document.createElement("td"); var td2=document.createElement("td"); var td3=document.createElement("td"); var td4=document.createElement("td"); td4.innerHTML="<a href='#' οnclick='removeTd(this)' >移除</a>" var select=document.createElement("select"); select.options.length=0; for(var i="2002";i<=(new Date).getFullYear();i++){ select.options.add(new Option(i+"年",i)); } tr.name='addTrs'; var div=document.createElement("div"); var input = document.createElement("input"); var img=document.createElement("img"); img.className="imgShow"; input.type = "file"; input.name = "uploadFile[" + (++t) + "].file"; select.name= "uploadFile["+t+"].yearPhoto"; img.name="img["+t+"]"; td1.appendChild(select); td2.appendChild(input); td3.appendChild(div); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tbody.appendChild(tr); input.onchange=function (){ var imgObjPreview = document.getElementById("preview"); if (this.files && this.files[0]) { img.style.display = 'block'; img.style.width = '300px'; img.style.height = '120px'; img.src = window.URL.createObjectURL(docObj.files[0]); } else { var fso=new ActiveXObject("Scripting.FileSystemObject"); var file=fso.GetFile(this.value); //window.onerror = window.oldOnError; if (file.Size/1024>300) { alert("上传文件不能大于3k!") ; this.outerHTML=this.outerHTML.replace(/(value=\").+\"/i,"$1\""); return false; } this.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById("localImag"); div.style.width = "100px"; div.style.height = "100px"; try { div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; div.filters .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch (e) { alert("您上传的图片格式不正确,请重新选择!"); return false; } imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } }