通常情况下,我们利用浏览器来上传文件的时候,常常会限制文件的大小,例如上传图片,自定义头像这些东东,如果让文件数据上传到服务器端,再来判断文件的大小提示用户文件过大,这里会有一些网络的延迟,更重要的是浪费了带宽,今天在研究这个问题的时候,找到了在本地利用javascript来判断文件大小,从而带来了很好的客户端体验,又节约了相当大的带宽,以下是代码片段:
HTML表单代码片段:
代码
这里对IE6和Firefox3分别用了image标签的synsrc属性和files数组,从而解决了浏览器获取待上传文件大小的这个问题。在firefox3中,files这个数组的项还有另外一个方法getAsBinary方法,可以获取该文件的二进制流,这样可以对文件进行Hash计算,在一起需要上传需要Hash作为文件名的场合下也是非常有用的,IE6下需要用到ActiveX控件ADO(浏览器自带)也能获取二进制流,不过这里可能会被浏览器的安全设置截获到而无法正常使用。
HTML表单代码片段:
代码
<form id="uploadfile" name="uploadfile" class="" target="upload" action="http://web.qq.com/cgi-bin/cface_upload" method="POST" enctype="multipart/form-data">
<input id="custom_face" name="custom_face" type="file">
<input name="f" type="hidden" value="fallback">
<input name="go" type="button" value="Upload File" onclick="Upload();">
</form>
javascript代码片段:
function Upload()
{
var form=document.getElementById("uploadfile");
var face=document.getElementById("custom_face");
//ReadFFFile(face);
var fileSize=GetFileSize(face);
if(fileSize>1024*1024)
{
alert("文件不能大于1M");
}
else
{
form.submit();
};
};
function GetFileSize(fileObj)
{
var image=new Image();
var filePath=fileObj.value;
image.dynsrc=filePath;
var fileSize=image.fileSize||0;
if(fileSize==0)
{
fileSize=fileObj.files[0].fileSize;
};
return fileSize;
};
<input id="custom_face" name="custom_face" type="file">
<input name="f" type="hidden" value="fallback">
<input name="go" type="button" value="Upload File" onclick="Upload();">
</form>
javascript代码片段:
function Upload()
{
var form=document.getElementById("uploadfile");
var face=document.getElementById("custom_face");
//ReadFFFile(face);
var fileSize=GetFileSize(face);
if(fileSize>1024*1024)
{
alert("文件不能大于1M");
}
else
{
form.submit();
};
};
function GetFileSize(fileObj)
{
var image=new Image();
var filePath=fileObj.value;
image.dynsrc=filePath;
var fileSize=image.fileSize||0;
if(fileSize==0)
{
fileSize=fileObj.files[0].fileSize;
};
return fileSize;
};
这里对IE6和Firefox3分别用了image标签的synsrc属性和files数组,从而解决了浏览器获取待上传文件大小的这个问题。在firefox3中,files这个数组的项还有另外一个方法getAsBinary方法,可以获取该文件的二进制流,这样可以对文件进行Hash计算,在一起需要上传需要Hash作为文件名的场合下也是非常有用的,IE6下需要用到ActiveX控件ADO(浏览器自带)也能获取二进制流,不过这里可能会被浏览器的安全设置截获到而无法正常使用。
作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:https://jackxiang.com/post/2055/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!
评论列表