实现向服务器上传图片文件、实现不同方式的form表单提交方式

jquery不能异步传输图片文件资源，可以通过form表单提交：

.文件上传
step1:提供一个文件上传的页面
<form action="upload.do" enctype="multipart/form-data" method="post">
注意:
   1)文件上传时,数据的提交方式只能是post提交方式.
   2)form标签中enctype="multipart/form-data"
  默认的传值方式是使用的字符流,enctype="application/x-www-form-urlencoded"
文件上传使用的二进制流,enctype="multipart/form-data"
step2:导入apache提供的两个commons包
commons-io.jar ,commons-fileupload.jar
step3:servlet中处理二进制流(jspDemo01/UploadServlet.java)

代码：

<form action="upload" id="form22" name="www" enctype="multipart/form-data"   method="post" >

  选择文件：<input type="file" name="files" style="position: absolute; border:0 ;opacity:0 ;width:50px;height:50px;"/></br>
  <img src="xxx.jpg" style="width:50px;height:50px;"/></br>

注：点击图片样式button，设置style样式position: absolute; border:0 ;opacity:0;-----图片高宽须和按钮高宽一致 
  备注文字：<input type="text" name="remark"/></br>

  方法一：submit方式提交：<input type="submit" value ="submit上传"  /></br>

方法二：普通按钮提交：<input type="button" οnclick="f2()" value=“普通按钮一”/></br>

方法2.1：普通按钮提交：<input type="button" value="普通按钮二" οnclick="document.getElementById('form22').submit()"/>

注：方法2.1可以是一个超链接等触发点击提交事件，比较灵活

  方法三：检查文件格式提交(实现一次点击确认上传)：<input id="id"    οnchange="isCheckingImage(this)"  type="file" name="name"     />

注：方法三综合以上方法，实现选择文件后确认后，即可上传图片，无需点击按钮提交
  </form>

js:

方法二JS:

functionf2(){

document.forms[obj.id].submit();//文件上传document.forms[‘form表单name值’].submit();

}

方法三JS：

function isCheckingImage(obj){
  var v=$("#"+obj.id).val();
  if(v!=''){
  var a=v.lastIndexOf("."); 
  var strr=v.substring(0);//文件名称
  var str=v.substring(a+1);//文件后缀名
  var imgArr = [ "jpg","jpeg","gif","bmp","JPG","JPEG","GIF","BMP","png","PNG"];
  if($.inArray(str, imgArr)=='-1'){
  alert('请选择正确的图片格式');
  var obj = document.getElementById(obj.id).value="" ;  //清空不合格的文件
  }else{
  alert("成功")
  document.forms[obj.id].submit();//文件上传
  } 
  }
}

servlet代码:

DiskFileItemFactory dff = new DiskFileItemFactory();
ServletFileUpload sf = new ServletFileUpload(dff);
String fileName=null;
String value=null;
try {
//通过解析器解析请求的数据,FileItem对应的input对象
List<FileItem> items = sf.parseRequest(req);
for (FileItem item : items) {
if(item.isFormField()){//为true就为普通文本域
System.out.println("普通文本域");
String name = item.getFieldName();
value = item.getString();
value = new String(value.getBytes("ISO-8859-1"),"utf-8");
System.out.println("text-name:"name+",text-value:"+value);
optColorID=value;
}else{//文件域
fileName = item.getName();
//兼容不同浏览器显示的文件名称
fileName = fileName.substring(fileName.lastIndexOf("/")+1);
System.out.println("fileName:"+fileName);
String path = context.getRealPath("photos");
System.out.println("photos路径："+path);
File file = new File(path+File.separator+fileName);
item.write(file);
}
}
} catch (Exception e) {
e.printStackTrace();
}