js上传图片预览

Posted 2020-08-09

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;

    }