关于file控件文件上传按钮

<input type="file" name="fileUp" value="上传"/>

　　

页面上表示的是一个text区域和一个参照按钮，现在想将左边的text区域隐藏模拟成只有一个按钮的样子。

想法是将这个input给隐藏起来，另写一个按钮通过onclick来吊这个方法的onclick。

但通过测试，如果通过别的按钮来触发file控件的onclick的话js会出现拒绝访问的情况，根本没办法触发file控件的上传。

 

于是，另一个想法就是将这个控件原位放在那，上面覆盖一层样式，看起来像是只有一个按钮 其实点击那块区域的时候 仍然是点击了file控件本身。

于是用<span/>来模拟一个按钮的样式，并把原来的file控件透明度降成0

下面是代码

.btnAdd {
  border:solid;
  border-width:1px 2px 2px 1px;
  border-collapse: collapse; 
  background: menu;
  vertical-align:middle; 
  text-align: center;
  height:40px;
  width:119px; 
  font-weight: normal;
  border-width:1 2 2 1;
  padding:2 15;
  cursor:pointer;
  border-style:outset;
  font-size:12px;
  text-valign:center;
}

<div class="btnAdd" id="btnAddBef${loopStatus.in" onmousedown="divChange('inset','Bef')" onmouseup="divChange('outset','Bef')" >
     <span><br/>写真貼付<br/></span> 
 　　<input name="fileUp" type="file" value="添付" 
      style="position: absolute;filter:alpha(opacity=0);left:120px;width:90px;margin-top:-26px;height:40px;font-size:31px"
      id="fileUpBef" onchange="submitImageAttachBef()">
 </div>

比较麻烦的部分就是上面那段模拟按钮式样的部门，加了这段之后只是看起来比较像一个按钮。

<script type="text/javascript">

 function divChange(css,id){      document.getElementById('btnAdd'+id).style.borderStyle=css; }

</script>

 

但当点击按钮的时候 出现的一些阴影的效果还没有做出来，这样需要给上面的div 加一个onmousedown和onmouseup模拟一下点击按钮的动作.

 按钮模拟完之后，现在是后台取值的问题了。

file控件在struts和spring控件下有不同的取法。

Struts

import org.apache.struts.upload.FormFile;

UploadForm uploadForm = (UploadForm)form;
FormFile formFile = uploadForm.getFile();

String path = request.getRealPath("/files")+"\\" + formFile.getFileName();

可以通过FormFile，直接获取form中提交到后台的file，文件本身的path属性都有

 

Spring

spring中提交后台就薛微有点麻烦。

首先form的属性

<form:form modelAttribute="gmwkjk011Dto" method="post" styleId="form" action="${actionUrl}" enctype="multipart/form-data">

后台获取的文件是MultipartFile

在form中    

private MultipartFile                          fileUpAft;

    public MultipartFile getFileUp() {

        return fileUp;     

    }

    public void setFileUp(MultipartFile fileUp) {

        this.fileUp = fileUp;     

    }

 

Controller里

import org.springframework.web.multipart.MultipartFile;

MultipartFile file = form.getFileUp();

这样就能获取到前台传过来的file

如果想取一些上传文件的属性也可以通过读取图片信息来获得

 

Metadata metadata = JpegMetadataReader.readMetadata(file.getInputStream());
Directory exif = (ExifDirectory) metadata.getDirectory(ExifDirectory.class);
String height = "";
String width = "";
if (exif != null && exif.containsTag(ExifDirectory.TAG_THUMBNAIL_IMAGE_HEIGHT)
      && exif.containsTag(ExifDirectory.TAG_THUMBNAIL_IMAGE_WIDTH)) {
       height = exif.getDescription(ExifDirectory.TAG_THUMBNAIL_IMAGE_HEIGHT).replace("pixels", "").trim();
       width = exif.getDescription(ExifDirectory.TAG_THUMBNAIL_IMAGE_WIDTH).replace("pixels", "").trim();
} else {
       Directory jpegExif = (JpegDirectory) metadata.getDirectory(JpegDirectory.class);
      if (jpegExif != null && jpegExif.containsTag(JpegDirectory.TAG_JPEG_IMAGE_HEIGHT)
           && jpegExif.containsTag(JpegDirectory.TAG_JPEG_IMAGE_WIDTH)) {
             height = String.valueOf(jpegExif.getInt(JpegDirectory.TAG_JPEG_IMAGE_HEIGHT)).trim();
             width = String.valueOf(jpegExif.getInt(JpegDirectory.TAG_JPEG_IMAGE_WIDTH)).trim();
          }
}