JavaScript文件及目录操作技巧.pdfVIP

JavaScript⽂件与⽬录操作技巧 JavaScript设置表单上传时⽂件个数的⽅法 这是⼀个⽐较实⽤的功能，⽤JavaScript来设置表单上传⽂件时，根据需要⽣成上传表 单，要⼏个⽣成⼏个，在⽹ 邮箱、新浪邮箱的添加附件功能⾥都有这种功能，不过 这⼀款没有删除表单的功能，如果输⼊的多了，只好重新来过啦 运⾏效果如下图所⽰： 具体代码如下： titleJavaScript设置表单上传时的⽂件个数/title input type=button name=button value=添加附件 onclick=addInput() input type=button name=button value=删除附件 onclick=deleteInput() span id=upload/span script type=text/j avascript var attac name = attac ; var i= 1; function addInput(){ if(i0){ var attac = attac name + i ; if(createInput(attac )) i=i+ 1; } } function deleteInput(){ if(i 1){ i=i-1; if( !removeInput()) i=i+ 1; } } function createInput(nm){ var aElement=document .createElement(input); aElement .name=nm; aElement .id=nm; aElement .type=file; aElement .size=50 ; //aElement .value=t anks; //aElement .onclick=Function(asdf()); if(document .getElementById(upload) .appendC ild(aElement) == null) return false; return true; } function removeInput(nm){ var aElement = document .getElementById(upload); if(aElement .removeC ild(aElement .lastC ild) == null) return false; return true; } /script JavaScript File API⽂件上传预览 对于基于浏览器的应⽤⽽⾔，访问本地⽂件都是⼀件头疼的事情，通常我们能做的仅 仅是使⽤input type=file标签来上传⽂件。实现过程是：选取⽂件的时候value 属性 保存了⽤户指定的⽂件的名称，表单被提交的时候，浏览器会向服务器发送选中的⽂ 件的内容⽽不仅仅是发送⽂件名。再获取服务器返回的地址，然后做预览。 　　 但是如果有⼀天我们要上传⼀个图⽚，传了图⽚后预览想换另⼀张图⽚，就又得先上 传到服务器再预览。在⽹络⽐较慢的情况下，这样真的很折腾。 　　 所以我们某些时候需要先预览再上传到服务器，特别是⼀些有剪切功能的需求，例如 新浪微博的头像更换。但是⽬前能做的只能是借助插件开发或者使⽤flas ，由于不同 浏览器的技术实现不尽相同，为了让程序能够⽀持多浏览器，我们的程序就会变得⼗ 分复杂⽽难于维护。幸好现在有了File API 。 　　 通过监听c ange事件我们可得知⽤户选择的⽂件，并且添加了⼀个files集合，集合中 将包含file对象，每个file对象对应着⼀个⽂件。并且都有以下只读属性 name ,size ,type ,lastModifiedDate . 以input type=file name=file为例，监控onc ange事打印它的file对象： 由此我们可得知⽤户选取的⽂件格式，⽂件名以及⽂件⼤⼩等等的⼀些信息。因此我 们很容 就能为所选取的⽂件作验证判断是否符合我们定的⼀些要求。 除此之外File API还提供了FileReader类型读取⽂件中的数据。 FileReader类型实现的事⼀种异步⽂件读取机制，类似于XMLHttpRequest