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的<progress>标签搭配，制作一个读取进度条
};

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，赋值给<img>的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控件初始化并执行脚本（不安全）-点击启用-确定】");
}

实例代码：

<script>
	$('.ImageInput').on('change', function() {
	var file = this.files[0]; //获取File对象
	if(!/image\/\w+/.test(file.type)) {
		alert("看清楚，这个需要图片！");
		return false;
	}
	if(typeof FileReader != 'undefined') {
		//创建读取文件的对象
		var reader = new FileReader();
		//创建文件读取相关的变量
		var imgFile;
		//正式读取文件
		reader.readAsDataURL(file);
		//为文件读取成功设置事件
		var str = '';
		reader.onload = function(e) {
			imgFile = e.target.result;
			console.log(imgFile);
			$('img').attr('src', imgFile);

			console.log(imgFile);

		};
	} else {
		var URL = window.URL || window.webkitURL;
		var imageURL = URL.createObjectURL(file);

		$('img').attr('src', imageURL);

		console.log(imgFile);

	}

}

});
</script>

扫描二维码关注公众号，回复： 3179576 查看本文章

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

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

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

1.获取File对象

2.FileReader

猜你喜欢