js在设计时考虑到安全的原因是不允许读写本地文件的，随着html5的出现提供了fileReader AP从而可以I实现本地图片的读取预览功能，
另外在移动端有的限制图片大小的需求，主要是考虑图片过大会占用带宽，严重拖慢浏览速度，所以需要进行前端的压缩，主要通过html5的canvas来实现，
代码入下：
HTML：
<h3>上传图片</h3>
<ul class="list">
<li class="upload">
<input type="file" class="chose" accept="image/*" multiple/>
<img src="img/weituo_luru_add.png" />
</li>
</ul>
CSS：
* {
padding:;
margin:;
}
h3{
font-size: 0.6rem;
font-weight: normal;
padding: 0.4rem 0.6rem;
}
.list {
margin-left: 0.4rem;
margin-top: 0.4rem;
overflow: hidden;
}
.list li {
float: left;
width: 2.76rem;
height: 2.76rem;
margin-right: 0.4rem;
position: relative;
list-style: none;
}
.list img {
width: 100%;
height: 100%;
}
.upload input {
width: 100%;
height: 100% ;
opacity:;
position: absolute;
top: 0 ;
left: 0 ;
right: 0 ;
bottom: 0 ;
z-index:;
transform: translateY(0) ;
}
.upload img {
width: 100%;
height: 100%;
position: absolute;
top:;
left:;
right:;
bottom:;
}
#upcancle {
position: absolute;
right:;
width: 0.6rem;
height: 0.6rem;
text-align: center;
line-height: 0.6rem;
background-color: #00D3AF;
color: #f3f3f3;
border: solid 0.02rem #00D3AF;
font-size: 0.5rem;
border-radius: 50%;
z-index:;
font-weight: bold;
}
JS：
var reader = new FileReader();
//创建一个img对象
var img = new Image();
// 选择的文件对象
var file = null;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d'); // base64地址图片加载完毕后
img.onload = function() {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制，可通过国设置宽高来实现压缩程度
var maxWidth = 800,
maxHeight = 800;
// 目标尺寸
var targetWidth = originWidth,
targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if(originWidth > maxWidth || originHeight > maxHeight) {
if(originWidth / originHeight > maxWidth / maxHeight) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
//画布背景色改为白色，默认是黑色，如果上传的是圆形图片会背景有黑色块
context.fillStyle = '#fff';
context.fillRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight); /*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
//压缩后的图片base64 url
/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
* qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
var newUrl = canvas.toDataURL('image/jpeg', 0.92); //base64 格式 //显示压缩后的图片
var li = '<li><span id="upcancle">X</span><img src="' + newUrl + '"/></li>';
$('.list').prepend(li);
};
//input type='file'上传时执行的函数
$('.chose').change(function() {
file = this.files[0];
// 选择的文件是图片
if(this.files && this.files[0]) {
var ext = this.value.substring(this.value.lastIndexOf(".") + 1).toLowerCase();
if(ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
alert("图片的格式必须为png或者jpg或者jpeg格式！");
return false;
} else {
reader.readAsDataURL(file);
}
}
})
// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
}; //删除按钮
$('.list').delegate('span', 'click', function() {
$(this).parents('li').remove();
})