欢迎使用CSDN-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

qq_34744724

最新推荐文章于 2021-01-07 23:01:28 发布

阅读量118

点赞数

分类专栏：图片上传前端文章标签： file图片转换

图片上传前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

      <html><body><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="{{URL::asset('/assets/topc/images/default_head.jpg')}}" style="border:1px solid #dfdfdf;width:100px;height:100px;margin:20px 0 0 50px;"
             class="img-circle" id="image">
            </div>

        </div>
        </body>

$(‘#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;
}
}