input file读取图片

1.获取File对象

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 //返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代,只读

//可以根据以上属性设置上传文件类型以及最大上传文件大小

2.FileReader

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.onabort = function(){
    //当文件读取被中止时触发
};

reader.onerror = function(){
    //当读取操作发生错误时触发
};

reader.onload = function(){
    //当读取操作成功完成时触发
};

reader.onloadend = function(){
    //当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.
};

属性

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控件初始化并执行脚本(不安全)-点击启用-确定】");
}

 实例代码:

 

 
 

input file读取图片_第1张图片

1.若想预览该图片,可以像demo中一样,直接把读取的文件的所有数据,包括数据头(就是控制台输出的所有数据,包括“data:image/jpeg;base64,”和后面的所有内容)一起写入一个标签的src中。这样就可以看到显示对应的图像。

    2.若想存入服务器端的文件中,需要把数据头(data:image/jpeg;base64,)去掉,并且根据“image/“之后的内容(如“jpeg、png……”)来判断图片文件的后缀,从而在服务器端生成对应后缀的文件,并写入除开数据头之外的所有数据。

这里,我先给出一部分base64码中文件格式以及对应应该生成什么后缀的文件:

input file读取图片_第2张图片

input file读取图片_第3张图片 

 

 

你可能感兴趣的:(前端)