html css js 上传图片预览和压缩，兼容ie浏览器，限制上传图片大小和格式
html
<form action="这里是传到后台的地址" method="post" enctype="multipart/form-data">
<input type="file" onchange="previewImage(this)" name="file" style="display:none" class="upLoad"/>
<input type="button" class="upImg" value="上传图片"/>
<!--图片预览区-->
<div id="ferret">
<img id="photo" src="logo.png"/>
</div>
<input type="submit" value="提交" class="upImg1">
</form>
CSS
<style>
.upImg{
100px;
height: 30px;
background: #5bc0de;
color: #fff;
border: none;
border-radius: 2px;
margin: 10px;
}
.upImg1{
100px;
height: 30px;
background: #5bc0de;
color: #fff;
border: none;
border-radius: 2px;
margin: 10px;
}
#ferret{
margin: 10px;
}
</style>
js
//你可以隐藏掉默认的的文件输入框<input>元素，使用自定义的界面来充当打开文件选择对话框的按钮。
// 实现起来很简单，你只需要使用样式display:none把原本的文件输入框隐藏掉，然后在需要的时候调用它的click()方法就行了。
$(function () {
$(".upImg").click(function () {
$(".upLoad").trigger("click");//自动触发
})
});
//图片上传预览
function previewImage(file) {
//限制格式
var filePath=file.files.item(0).name;//获取上传文件名称
var type=filePath.substr(filePath.indexOf('.')+1).toLowerCase();//获取后缀，点之后
(//看看这是否是一个图像文件(通过一个正则表达式匹配字符串“image.*”)。
//var imageType = /^image//
//if ( !imageType.test(file.files.item(0).type) )
{
//continue;
//})或者用下面的限制格式
if(type!=="png"&&type!=="jpg"&&type!=="gif") {
alert("格式不正确，上传格式只能为png,jpg,gif格式");
return false;
}
//图片预览
var img = document.getElementById('photo');
var reader = new FileReader();//使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]); //如果用户只选择了一个文件,那么我们只需要访问这个FileList对象中的第一个元素.files[0]
//在创建新的FileReader对象之后,我们建立了onload函数,然后调用readAsDataURL()开始在后台进行读取操作。当图像文件的所有内容加载后，
// 他们转换成一个 data: URL，传递到onload回调函数中。之后只需要把img元素的src属性设置为这个加载过的图像，
// 就可以让图像的缩略图出现在用户的屏幕上。
//<input type="file" id="input">
//通过File API,我们可以在用户选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象,这些对象被包含在一个FileList对象中.
//如果你的程序可以让用户选择多个文件,记得要在input元素上加上multiple属性：<input type="file" id="input" multiple onchange="handleFiles(this.files)">
//在用户选择了多个文件的情况下，传入handleFiles()函数的文件列表将会包含多个File对象,每个File对象对应一个真实的文件。
//用户所选择的文件都存储在了一个FileList对象上，其中每个文件都对应了一个File对象。你可以通过这个FileList对象的length属性知道用户一共选择了多少个文件：
// var numFiles = files.length
//File对象上有三个属性提供了所包含文件的相关信息.
//name 文件名,只读字符串,不包含任何路径信息.
// size 文件大小,单位为字节,只读的64位整数.
//type MIME类型,只读字符串,如果类型未知,则返回空字符串.
}
详细解说 https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications
更全面的代码，预览的图片经过压缩，上传图片限制大小，兼容IE浏览器
js
function previewImage(file) {
var MAXWIDTH = 260;//最大宽度
var MAXHEIGHT = 180;//最大高度
var div = document.getElementById('ferret');
if (file.files && file.files[0])
{
//限制大小
var size=file.files.item(0).size/1024;
if(size>200){
alert("文件大于200kb");
return false;
}
//限制格式
var filePath=file.files.item(0).name;
var type=filePath.substr(filePath.indexOf('.')+1).toLowerCase();//获取后缀
if(type!=="png"&&type!=="jpg"&&type!=="gif"){
alert("格式不正确，上传格式只能为png,jpg,gif格式")
return false;
}
div.innerHTML ='<img id=photo>';
var img = document.getElementById('photo');
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
img.style.marginLeft = rect.left+'px';
img.style.marginTop = rect.top/2-15+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id=photo>';
var img = document.getElementById('photo');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top/2+"px;"+sFilter+src+""'></div>";
}
//file.stopPropagation();
}
//压缩图片
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight )
{
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}