html异步上传文件,JS异步上传文件

项目中做到了头像上传的功能.因为不可能修改头像就把整个表单提交,所以必须要使用AJAX来实现异步上传文件.

服务端只要获取到客户端文件的本地路径,然后使用文件流来实现文件操作就可以了.

主要还是在浏览器端获取文件的本地路径和预览功能.

IE浏览器从IE6开始已经不能使用input.value直接获取input:file控件的本地路径

其他浏览器比如chrom和FF等都不能直接使用input.value获取文件的本地路径.

那么只能使用别的方法实现异步上传文件功能.

首先声明IE6不考虑

chrome和firefox因为对HTML5支持比较好.所以可以使用HTML5中的files和FileReader对象来实现图片预览功能.如下

varfileList = obj.files;

varimageType = /image.*/;

for(vari = 0; i < fileList.length; i++) {

varfile = fileList[i];

if(!file.type.match(imageType)) {

continue;

}

varreader = newFileReader();

reader.onload = function(e) {

fileName = e.target.result; //Data URI格式

img.src = fileName; //给img.src赋值

};

reader.readAsDataURL(file); //转换成Data URI格式

}

IE7-IE9使用

this.select();

this.blur();

varfileName=document.selection.createRange().text;

来获取文件的本地路径.

然后是用图片预览,因为IE7-IE9中的img控件的src属性已经不能直接使用本地路径来显示图片.所以使用滤镜来实现

divShowImage.setAttribute("style", "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:300px; height:300px;");

divShowImage.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = fileName;

img.setAttribute("style", "display:none"); //隐藏IMG避免在图片的左上角出现一个小叉叉.

=========================20121009===============================

然后是上传..在这里遇到了最大的问题...其实在之前已经遇到过这个问题...但是都先放过去.等要用到的时候再去实现..

就是chrome居然无法获取到图片的本地路径.因为不想提交表单域.网上还是提供了使用js中的XMLHTTPResponse对象来实现ajax直接提交图片的二进制码.

因

为以前都是使用jq来实现ajax的.所以对于XMLHTTPResponse对象非常不熟悉.导致在.ashx中都不知道如何获取数据.尝试了多次..

暂时没有结果.这时候我又开始思考是不是应该继续下去.因为已经感觉到复杂了..这么一个异步上传..在理想中不应该是如此复杂,那么就应该考虑自己的思

路是不是出现了问题,是不是能换个思路进行下去.

1.考虑使用IFrame中嵌入上传的页面来实现异步上传.

2.早先考虑过的使用falsh插件.但是还是感觉不好..因为觉得可以用js+ajax实现.

3.还想到webcjs中使用的异步上传,使用表单域提交,因为其他数据都是通过无表单域的AJAX提交的.所以页面的表单域可以留给上传文件.

4.继续尝试取得提交到服务端的XMLHTTPResponse对象.

决定了..先使用第三条解决方案.

终于完成异步头像上传的全部功能...还是使用了客户端提交表单,然后服务端context.Request.Files来获取文件属性.并且使用jquery.form.js来实现异步提交表单.

主要问题还是服务端获取不到Files对象.form中必须有enctype="multipart/form-data"

然后input:file 控件中必须要有 runat="server"

然后才可以在.ashx文件中获取到Request.Files;

后面的保存和修改数据库信息已经不存在问题了.

总结...

就是感觉HTML5兼容性太差.各种不确定.有些属性不是这个浏览器不支持就是那个浏览器不支持.

预览图片的还是使用HTML5中files对象来转换成Data URI来赋值到src属性上.

然后IE的预览图片还是使用滤镜来实现.