图片随file改变js

来源：互联网发布：网络销售推广方案编辑：程序博客网时间：2024/06/04 20:10

<input onchange="javascript:change(this,imgout,image);" type="file" name="fileimage" id="fileimage"  style="display:none"/><div class="acc_inf_middle_right_head">    <div id="imgout"><img src="https://gd1.alicdn.com/bao/uploaded/i1/99303606/TB2pHjilVXXXXaoXXXXXXXXXXXX_!!99303606.jpg_400x400.jpghttps://gd1.alicdn.com/bao/uploaded/i1/99303606/TB2pHjilVXXXXaoXXXXXXXXXXXX_!!99303606.jpg_400x400.jpg" style="border:1px solid #dfdfdf;width:100px;height:100px;margin:20px 0 0 50px;"     class="img-circle" id="image">    </div><div class="imgintroduce">点击设置您的个人头像JPG,PNG,JPEG格式,文件小于4M</div></div>

$('#image').click(function(){    $('#fileimage').trigger("click");});

//imgout图片外面div地址

//image图片id

function change(obj,imgout,image){    var array = new Array('gif','jpeg','png','jpg','bmp');//可以上传的文件类型    if(obj.value == '') {        $.messager.alert("提示","请选择要上传的图片");        return false;    }    else {        var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3];//这个文件类型正则很有用        //布尔型变量        var isExists = false;        //循环判断图片的格式是否正确        for (var i in array) {            if (fileContentType.toLowerCase() == array[i].toLowerCase()) {                //判断上传图片的大小                /*var ImgFileSize = Math.round(addImg.files[0].size/1024*100)/100;//取得图片文件的大小                 if(AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize) {                 $.messager.alert("错误提示","图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件，当前图片大小为"+ImgFileSize+"KB","");                 return false;                 }*/                //图片格式正确之后，根据浏览器的不同设置图片的大小                if (obj.files && obj.files[0]) {                    //火狐下，直接设img属性                    image.style.display = 'block';                    image.style.height = '100px';                    image.style.width = '100px';                    //火狐7以上版本不能用上面的getAsDateURL()方式获取，需要以下方式                    image.src = window.URL.createObjectURL(obj.files[0]);                }                else {                    //IE下，使用滤镜                    obj.select();                    var imgSrc = document.selection.createRange().text;                    //必须设置初始大小                    imgout.style.height = "100px";                    imgout.style.width = "100px";                    //图片异常的捕捉，防止用户修改后追来伪造图片                    try {                        imgout.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                        imgout.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;                    } catch (e) {                        $.messager.alert("错误提示", "您上传的图片格式不正确，请重新选择", "");                        return false;                    }                    image.style.display = 'none';                    document.selection.empty();                }                isExists = true;                return true;            }        }        if (isExists == false) {            $.messager.alert("错误提示","上传图片类型不正确","");            return false;        }        return false;    }}

0 0