1.接上一篇的form表单的ajax问题,上一篇中的form表单的ajax提交不能上传文件,所以采用了formData的方式上传
1)前段代码如下:
<form action="" enctype="multipart/form-data" method="post" id="documentForm">
<div class="edit-con-bottom3" id="documentDiv">
<input type="file" id="documentFile" name="formData.documentFile" />
<input type="button" onclick="doUpload()" value="上传" />
</div>
</form>
2)javascript中的函数写发如下:
//文件上传
function doUpload() {
if ($("#documentFile").val().length == 0) {
alert("请选择文件!");
return false;
}
var formData = new FormData($( "#documentForm" )[0]);
$.ajax({
url: "${root}/doRunT.action?handler=Common.toUploadNew&id=" + $("#showId").val() ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
showDocument();
},
error: function (returndata) {
alert("上传失败!");
}
});
}
3)后台action中照常解析即可
文件存储过程中名称不重复的问题,可以使用时间戳作为文件名,也可以使用UUID作为文件名
String uniqueStr = UUID.randomUUID().toString();
4)解释一下为什么var formData = new FormData($( "#documentForm" )[0]);这句话后面要加一个[0]
因为new FormData的参数需要一个HTMLElement类型的数据,而jQuery得到的是个HTMLElement的集合,哪怕只有一个元素。所以需要用[]取其第一个元素。
jQuery是一个伪数组对象,本身是对象,能表现出来数组的特点: 有length属性,能够用下标取值;
$(".someClass") // 这个时候将所有匹配到DOM元素对象放在jQuery维护的数组中;
$("#id") // 这个时候将所有匹配到DOM元素对象放在jQuery维护的数组中;
在数组的特征外,jQuery还可以调用next()
, last()
等方法(返回结果也还是jQuery对象,jQuery链式功能);
所以:jQuery得到的是个HTMLElement的集合基础上的封装后的对象
2.attr(),prop(),以及val()的区别
prop()和val()都能获取到文本框的实际value值,而attr()获取的则始终为文档结构中的value的属性值,与文本框实际值无关,并不会变化。
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。