js上传图片预览

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js上传图片预览相关的知识,希望对你有一定的参考价值。

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{
width: 100px;
height: 30px;
background: #5bc0de;
color: #fff;
border: none;
border-radius: 2px;
margin: 10px;
}
.upImg1{
width: 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=‘width:"+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: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;

}
 
 
 

以上是关于js上传图片预览的主要内容,如果未能解决你的问题,请参考以下文章

求js多张图片上传,可预览右上角带删除图标的代码

input file图片上传预览js实现

js之上传文件多图片预览

js上传图片并预览

js 实现异步上传图片+预览

html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题