点击照片上传照片一

最新推荐文章于 2023-06-06 09:28:47 发布

weixin_34130269

最新推荐文章于 2023-06-06 09:28:47 发布

阅读量572

点赞数

假如你现在还在为自己的技术担忧，假如你现在想提升自己的工资，假如你想在职场上获得更多的话语权，假如你想顺利的度过35岁这个魔咒，假如你想体验BAT的工作环境，那么现在请我们一起开启提升技术之旅吧，详情请点击http://106.12.206.16:8080/qingruihappy/index.html

当点击图片的时候会上传照片的。

1，html页面

function uploadBtn(){
$("#upload").click();
}

//图片预览
function previewImg(imgFile){

console.log(imgFile);//这里打印出是整个input标签
var extension = imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);//扩展名
extension = extension.toLowerCase();//把文件扩展名转换为小写
if ((extension!='.jpg')&&(extension!='.gif')&&(extension!='.jpeg')&&(extension!='.png')&&(extension!='.bmp')){
layer.msg("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
$("#yushow").focus();//将焦点定位在文件上传的按钮上，可以直接按确定键再次触发
}else{
var path;//预览地址
if(document.all){//IE
imgFile.select();
path = document.selection.createRange().text;
}else{//火狐，谷歌
path = window.URL.createObjectURL(imgFile.files[0]);
}

$("#yushow").css("background-image","url("+path+")");//注意这一步的语法。
$('#yushow').css('backgroundSize','364px 226px');
return;
}
}

2，css

/*!
* author: jhl
* date: 2017-10-25
*/
.btn-scan {
margin: .25333rem .13333rem 0;
width: .69333rem;
height: .66667rem;
border: none;
background: url(../../../images/ffan/Icon_scan@2x.png) 0 no-repeat;
background-size: .69333rem .66667rem
}

.btn-wrapper {
background-color: #f3f4f6;
width: 100%;
height: 1.45333rem;
text-align: center;
padding-top: .28rem
}

.btn-submit {
text-align: center;
width: 9.2rem;
height: 1.17333rem;
background-color: #f54d4f;
border-radius: .10667rem;
border: none;
outline: none;
font-size: .45333rem;
color: #fff
}

.btn-upload {
width: 6.66667rem;
height: 4.13333rem;
background-color: #fff;
border: .01333rem dashed #ced1d9;
color: #f04b4d;
font-size: .4rem;
line-height: 5.28rem
}

.bg-business-license {
background: url(../../../images/ffan/Icon_red@2x.png) 50% 38% no-repeat,
url(../../../images/ffan/Img_YYZZ1@2x.png) 0 0 no-repeat;
background-size: .85333rem .74667rem, 6.66667rem 4.13333rem
}

.bg-id-front {
background: url(../../../images/ffan/Icon_red@2x.png) 50% 36% no-repeat,
url(../../../images/ffan/images/Img_front@2x.png) 0 0 no-repeat;
background-size: .85333rem .74667rem, 6.66667rem 3.57333rem
}

.bg-id-back, .bg-id-front {
height: 3.56rem;
line-height: 4.58667rem
}

.bg-id-back {
background: url(../../../images/ffan/Icon_red@2x.png) 50% 38% no-repeat,
url(../../../images/ffan/Img_back@2x.png) 0 0 no-repeat;
background-size: .85333rem .74667rem, 6.66667rem 3.57333rem
}

.info-list {
background-color: #fff;
color: #666;
font-size: .4rem;
font-family: PingFangSC-Regular;
list-style-type: none;
padding: 0 .43rem
}

.info-list-li {
height: 1.17333rem;
line-height: 1.17333rem;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
border-bottom: .5px solid #f3f4f6;
color: #cdd0d8
}

.info-list label {
color: #666
}

.info-list input, .info-list label {
height: 1.17333rem;
line-height: 1.17333rem;
font-size: .4rem
}

.info-list input {
margin-top: -.01333rem;
border: none;
text-align: right
}

.info-list .select {
padding-right: .4rem;
background: url(../../../images/ffan/Arrow_right@2x.png) no-repeat 100%;
background-size: .21333rem .37333rem
}

.info-list-li .input-before-btn {
text-align: center;
margin-left: .96rem;
width: 3.33333rem
}

.info-list .li-right {
display: -webkit-flex;
display: flex;
-webkit-align-content: space-between;
align-content: space-between
}

.info-list .warn {
color: #666
}

::-webkit-input-placeholder {
color: #cdd0d8
}

:-moz-placeholder, ::-moz-placeholder {
color: #cdd0d8
}

:-ms-input-placeholder {
color: #cdd0d8
}

.page-upload-business-license {
background-color: #f3f4f6;
height: 100%;
width: 100%;
text-align: center
}

.page-upload-business-license .btn-upload {
margin: .53333rem 0
}

.info-list-li .lable-with-bg {
padding-left: .8rem;
background: url(../../../images/ffan/BarCode@2x.png) 0 no-repeat;
background-size: .45333rem .34667rem
}

3，假如不是class而是一张图片的话

4，js脚本

//图片预览
function previewImg(imgFile){
console.log(imgFile);//这里打印出是整个input标签
var extension = imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);//扩展名
extension = extension.toLowerCase();//把文件扩展名转换为小写
if ((extension!='.jpg')&&(extension!='.gif')&&(extension!='.jpeg')&&(extension!='.png')&&(extension!='.bmp')){
layer.msg("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
$("#yushow").focus();//将焦点定位在文件上传的按钮上，可以直接按确定键再次触发
}else{
var path;//预览地址
if(document.all){//IE
imgFile.select();
path = document.selection.createRange().text;
}else{//火狐，谷歌
path = window.URL.createObjectURL(imgFile.files[0]);
}
$("#yushow").attr("src",path);//设置预览地址
}
}