var fileinput = Document.getElementById('id');
var File = fileinput.files[0]; //获取第一个File对象
//当上传文件为多个时,通过循坏获取多个File对象
var fileList = fileinput.files;
for( var i = 0 ; i < fileList.length ; i++ ){
console.log(fileList[i]);
}
File.name //返回当前 File 对象所引用文件的名字,只读
File.size //返回文件的大小,只读,单位为字节
File.type //返回文件类型,例如 PNG 图像是 "image/png",只读
File.lastModifiedDate //返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代,只读
//可以根据以上属性设置上传文件类型以及最大上传文件大小
if (window.FileReader){ //检测浏览器是否支持
var reader = new FileReader(); //构造FileReader对象
}else{
//不支持则只有使用其他图片预览方法
}
reader.readAsArrayBuffer(File); //将文件读取为ArrayBuffer对象格式
reader.readAsBinaryString(File); //将文件读取为二进制数据
reader.readAsDataURL(File); //将文件读取后返回其URL,适合图片预览
reader.readAsText(File,encoding='UTF-8') //将文件读取为文本形式,可指定编码方式
reader.abort() //终止读取操作
reader.onloadstart = function(){
//文件开始读取时触发
};
reader.onprogress = function(event){
//文件读取过程时定时触发
//已读取文件大小: event.loaded
//文件总大小: event.total
//可利用以上两个参数和HTML的
属性
reader.error //在读取文件时发生的错误. 只读
reader.readyState //表明FileReader对象的当前状态。包含以下三种状态,0:还没有加载任何数据;1:数据正在被加载;2:已完成全部的读取请求
reader.result //读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.
3.Window.URL
获取URL对象
var URL = window.URL || window.webkitURL;
创建图片URL
var imageURL = URL.createObjectURL(File);
//创建后即可直接使用该URL,赋值给
的src属性
释放URL
URL.revokeObjectURL(imageURL)
4.IE滤镜
try
{
fileobj.select();
fileobj.blur();
var path = document.selection.createRange().text;
var pic = document.getElementById("person_pic"); //获取img标签
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + path + "\")"; //滤镜预览图片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; //设置img的src为base64编码的透明图片,要不会显示红xx
}
catch(e)
{
alert(e+"\n"+"如果错误为:Error:Automation 服务器不能创建对象;"+"\n"+"请按以下方法配置浏览器:"+"\n"+"请打开【Internet选项-安全-Internet-自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本(不安全)-点击启用-确定】");
}
实例代码:
1.若想预览该图片,可以像demo中一样,直接把读取的文件的所有数据,包括数据头(就是控制台输出的所有数据,包括“data:image/jpeg;base64,”和后面的所有内容)一起写入一个标签的src中。这样就可以看到
显示对应的图像。
2.若想存入服务器端的文件中,需要把数据头(data:image/jpeg;base64,)去掉,并且根据“image/“之后的内容(如“jpeg、png……”)来判断图片文件的后缀,从而在服务器端生成对应后缀的文件,并写入除开数据头之外的所有数据。
这里,我先给出一部分base64码中文件格式以及对应应该生成什么后缀的文件: