js图片无刷新上传，预览

现在页面完成无刷新和服务器交互，都是用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" onclick="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" onchange="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="#" onclick="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" onchange="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='#' onclick='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;    
         }
}