carryLess开发日记_2017-05-18

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方法。