上传图片预览

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webqiand/p/5508378.html

文章标签：

#javascript #ViewUI

<script type="text/javascript">

        function previewImage(file) {
    var WIDTH = 80;
    var HEIGHT = 80;
    var div = document.getElementById('preview');
    if (file.files && file.files[0]) {
        div.innerHTML = '<img id=HeadImages>';
        var img = document.getElementById('HeadImages');
        img.onload = function () {
            var rect = clacImgZoomParam(WIDTH, HEIGHT, img.offsetWidth, img.offsetHeight);
            img.width = rect.width;
            img.height = rect.height;
            //                 img.style.marginLeft = rect.left+'px';
            img.style.marginTop = rect.top + 'px';
        }
        var reader = new FileReader();
        reader.onload = function (evt) { img.src = evt.target.result; }
        reader.readAsDataURL(file.files[0]);
    }
	}
</script>  

<form name="form5" id="form5" method="post" action="#">

<input type="file" name="file5" id="file5" onchange="previewImage(this)"/>
<div id="preview"></div>
</form>

判断img

//上传图片
    function previewImage(file, imgid) {


        






        var img = document.getElementById(imgid);

        var reg = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/;

        var fileName = file.value;
         
        if (fileName.lastIndexOf(".") == -1) {
            
            Showbo.Msg.alert("上传的图片只能是jpg、gif、bmp、png、jpeg类型！");

            $("#upimgts").html("未选择图片");
          
            
            return false;
        } else {


            var fileType = (fileName.substring(fileName.lastIndexOf("."), fileName.length)).toLowerCase();

            

            if (!reg.test(fileType)) {
              
                Showbo.Msg.alert("上传的图片只能是jpg、gif、bmp、png、jpeg类型！");
             
                $("#upimgts").html("未选择图片");
                return false;
            }

            else {
                
               

               
                    
                
                $("#upimgts").html(fileName);








                        var reader = new FileReader();
                        reader.onload = function (evt) { img.src = evt.target.result; }
                        reader.readAsDataURL(file.files[0]);




                    

             



            }







        }

    }

转载于:https://www.cnblogs.com/webqiand/p/5508378.html