在HTML和CSS中添加表单中的图片 [英] Add a Profile Picture in form in HTML and CSS

查看：195
本文介绍了在HTML和CSS中添加表单中的图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在创建一个表单，我需要该用户的配置文件图片，并且我希望图片为圆形或矩形形式，默认情况下，图像区域为黑色或虚拟图片，并且当用户单击该区域时那么他/她可以选择图像。例如Facebook，Twitter上的个人资料图片上传器。





我的表单



HTML 

 < div class =signup-w3ls> 
< div class =signup-agile1> 
< form action =＃method =post> 
 
< div class =form-control> 
< label class =header>个人资料照片：< / label> 
 
< input id =imagetype =filename =profile_photoplaceholder =Photorequired =capture> 
< / div> 
 
< div class =form-control> 
< label class =header>商店名称：< / label> 
< input type =textid =store_namename =store_nameplaceholder =Store Nametitle =请输入您的名字required => 
< / div> 
 
< div class =form-control> 
< label class =header>商店类型：< / label> 
< input type =textid =store_typename =store_typeplaceholder =Store Typetitle =请输入您的姓氏required => 
< / div> 
 
< div class =form-control> 
< label class =header>所有者类型：< / label> 
< input type =textid =owner_typename =owner_typeplaceholder =Owner Typetitle =请输入一个有效的电子邮件地址required => 
< / div> 
 
< div class =form-control> 
< label class =header>网站：< / label> 
< input type =urlid =websitename =websiteplaceholder =Websiteid =password1required => 
< / div> 
 
< div class =form-control> 
< label class =header>联络电话号码：< / label> 
< input type =textid =contact_numbername =contact_numberplaceholder =Contact Numberrequired => 
< / div> 
 
< div class =form-control> 
< label class =header>联络电子邮件：< / label> 
< input type =emailid =contact_emailname =contact_emailplaceholder =Contact Emailrequired => 
< / div> 
 
< input type =submitclass =registervalue =Register> 
< / form> 
 
< / div> 
< / div> 
< / div>

CSS 

  .signup-w3ls {
 width：50％; 
保证金：70px 25％80％; 
 padding：0; 
 display：table; 
职位：亲属; 
} 
 .signup-agile1 {
 width：100％; 
 float：center; 
} 
 
 .signup-w3ls .signup-agile1 .form-control {
 margin-bottom：20px; 
} 
 label.header {
 font-size：16px; 
 font-weight：500; 
 width：215px; 
颜色：灰色; 
 margin-right：10px; 
 text-align：justify; 
 letter-spacing：1px; 
 text-transform：大写; 
 display：inline-block; 
 font-family：'Nunito'，sans-serif; 
} 
输入＃图片，输入＃商店名称，输入＃商店类型，输入＃所有者类型，输入＃网站，输入＃联系人编号，输入＃联系人电子邮件{
 padding：0 40px; 
宽度：40％; 
 height：55px; 
 border：1px solid #dadada; 
颜色：灰色; 
 text-align：justify; 
概述：无; 
 letter-spacing：1px; 
 font-size：16px; 
 font-weight：normal; 
 font-family：'Muli'，sans-serif; 
 border-radius：30px; 
 -webkit-border-radius：30px; 
 -moz-border-radius：30px; 
 -o-border-radius：30px; 
 -ms-border-radius：30px; 
} 
输入＃image：焦点，输入＃store_name：焦点，输入＃store_type：焦点，输入＃owner_type：焦点，输入＃网站：焦点，输入＃联系人数量：焦点，输入＃contact_email：焦点{
 background-color：＃f5f8fa！important; 
 border：1px solid #dadada; 
} 
 input :: webkit-input-placeholder {
 color：grey; 
} 
输入：-moz-placeholder {/ * Firefox 18- * / 
颜色：灰色; 
} 
输入::  -  moz-placeholder {/ * Firefox 19+ * / 
颜色：灰色; 
} 
输入：-ms-input-placeholder {
颜色：灰色; 
} 
 .register {
 background-color：lightgreen; 
宽度：52％; 
 height：55px; 
 border：none; 
 margin-left：233px; 
光标：指针; 
颜色：#fff; 
概述：无; 
 font-size：20px; 
 font-weight：normal; 
 text-transform：大写; 
过渡：全部0.5秒缓出; 
 -webkit-transition：所有0.5s缓入; 
 -moz-transition：所有0.5s缓出; 
 -o-transition：所有0.5s缓出; 
 border-radius：30px; 
 -webkit-border-radius：30px; 
 -moz-border-radius：30px; 
 -o-border-radius：30px; 
 -ms-border-radius：30px; 
 font-family：'Muli'，sans-serif; 
} 
 .register：hover {
 background-color：＃36b051; 
颜色：#fff; 
}

JSFIDDLE： - https://jsfiddle.net/7ao1qxLe/

解决方案

当点击个人资料图片时，您可以做的是隐藏输入内容，就像点击一样：



$（＃profileImage）。click（function（e）{$（＃imageUpload ）.click（）;}）;

#imageUpload { display：none;}＃profileImage {cursor：pointer;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< image id =profileImagesrc = HTT p：//lorempixel.com/100/100/>< input id =imageUploadtype =filename =profile_photoplaceholder =Photorequired =capture> b
$ b

图片预览



您可以也给用户预览上传的图片： 

 函数previewProfileImage（上传者）{
 //确保文件（uploader.files& amp;& uploader.files [0]）{
 var imageFile = uploader.files [0]; 
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 //将图片数据设置为源
 $（'＃profileImage'）。attr（'src'，e.target.result）; 
} 
 reader.readAsDataURL（imageFile）; 
 
 
 $ b $（＃imageUpload）。change（function（）{
 previewProfileImage（this）; 
}）;

效率说明：如果您使用 createObjectURL 而不是以URL的形式读取数据。 

 函数fasterPreview（uploader）{
 if（uploader.files& amp; uploader.files [0]）{
 $（'＃profileImage'）。attr（'src'，
 window.URL.createObjectURL（uploader。文件[0]））;

正如您在 MDN ， URL.createObjectUrl 只会生成该文件的URL，而不必将其加载到DOM中，这对于大文件来说是绝对可取的。



圆形图像裁剪 h1>

要显示在圆圈中裁剪的图像，您需要给它一个外部 div 并应用 border-radius ：

HTML： 

 < div id =profile-container> 
< image id =profileImagesrc =aDefaultImage.png/> 
< / div>

CSS： 

 ＃profile-container {
 width：150px; 
 height：150px; 
 overflow：hidden; 
 -webkit-border-radius：50％; 
 -moz-border-radius：50％; 
 -ms-border-radius：50％; 
 -o-border-radius：50％; 
 border-radius：50％; 
 
 $ / code $ / pre 
 $ b $ h1完整解决方案
 
 
这段代码将所有三个步骤放在一起： 
 
 
 
 
  $（＃profileImage ）.click（function（e）{$（＃imageUpload）。click（）;}）; function fasterPreview（uploader）{if（uploader.files&& uploader.files [0]）{$（' #profileImage'）。attr（'src'，window.URL.createObjectURL（uploader.files [0]））; }} $（＃imageUpload）。change（function（）{fasterPreview（this）;}）;  

  #imageUpload {display：none;}＃profileImage {cursor：pointer;}＃profile-container {width：150px; height：150px;溢出：隐藏; -webkit-border-radius：50％; -moz-border-radius：50％; -ms-border-radius：50％; -o-border-radius：50％; border-radius：50％;}＃profile-container img {width：150px; height：150px;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =profile-container> < image id =profileImagesrc =http://lorempixel.com/100/100/>< / div>< input id =imageUploadtype =filename =profile_photoplaceholder =Photorequired =capture>

I am creating a form in which i need Profile Picture of the user and I want that the picture is in circle or rectangular form and by default, the area of image is black or dummy picture, and when user clicks on the area then he/she is allowed to choose image. e.g Profile Picture Uploader in Facebook, Twitter.

My Form

HTML

<div class="signup-w3ls">   
    <div class="signup-agile1">
        <form action="#" method="post">

            <div class="form-control"> 
                <label class="header">Profile Photo:</label>

                <input id="image" type="file" name="profile_photo" placeholder="Photo" required="" capture>
            </div>

            <div class="form-control"> 
                <label class="header">Store Name :</label>
                <input type="text" id="store_name" name="store_name" placeholder="Store Name" title="Please enter your First Name" required="">
            </div>

            <div class="form-control">
                <label class="header">Store Type :</label>
                <input type="text" id="store_type" name="store_type" placeholder="Store Type" title="Please enter your Last Name" required="">
            </div>

            <div class="form-control">  
                <label class="header">Owner Type :</label>
                <input type="text" id="owner_type" name="owner_type" placeholder="Owner Type" title="Please enter a valid email" required="">
            </div>

            <div class="form-control">  
                <label class="header">Website :</label>
                <input type="url" id="website" name="website" placeholder="Website" id="password1" required="">
            </div>

            <div class="form-control">  
                <label class="header">Contact Number :</label>  
                <input type="text" id="contact_number" name="contact_number" placeholder="Contact Number" required="">
            </div>  

            <div class="form-control">  
                <label class="header">Contact Email :</label>   
                <input type="email" id="contact_email" name="contact_email" placeholder="Contact Email" required="">
            </div>  

            <input type="submit" class="register" value="Register">
        </form>

    </div>
</div>  
</div>

CSS

    .signup-w3ls {
    width: 50%;
    margin: 70px 25% 80%;
    padding: 0;
    display: table;
    position: relative;
}
.signup-agile1{
    width:100%;
    float:center;
}

.signup-w3ls .signup-agile1 .form-control {
    margin-bottom: 20px;
}
label.header {
    font-size: 16px;
    font-weight: 500;
    width: 215px;
    color: grey;
    margin-right:10px;
    text-align:justify;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    font-family: 'Nunito', sans-serif;
}
input#image,input#store_name, input#store_type,input#owner_type, input#website,input#contact_number,input#contact_email {
    padding:0 40px;
    width:40%;
    height:55px;
    border: 1px solid #dadada;
    color: grey;
    text-align:justify;
    outline: none;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight:normal;
    font-family: 'Muli', sans-serif;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -o-border-radius:30px;
    -ms-border-radius:30px; 
}
input#image:focus,input#store_name:focus, input#store_type:focus,input#owner_type:focus, input#website:focus,input#contact_number:focus,input#contact_email:focus  {
    background-color:#f5f8fa !important;
    border:1px solid #dadada;
}
input::-webkit-input-placeholder {
color: grey;
} 
input:-moz-placeholder { /* Firefox 18- */
color: grey;  
} 
input::-moz-placeholder {  /* Firefox 19+ */
color: grey;  
} 
input:-ms-input-placeholder {  
color: grey;  
}
.register {
    background-color: lightgreen;
    width: 52%;
    height: 55px;
    border: none;
    margin-left: 233px;
    cursor: pointer;
    color: #fff;
    outline: none;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    font-family: 'Muli', sans-serif;
}   
.register:hover {
    background-color:#36b051;
    color:#fff;
}

JSFIDDLE:- https://jsfiddle.net/7ao1qxLe/

解决方案

What you can do is to hide the input and just act as if it was clicked when the profile image is clicked:

$("#profileImage").click(function(e) {
    $("#imageUpload").click();
});

#imageUpload
{
    display: none;
}

#profileImage
{
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<image id="profileImage" src="http://lorempixel.com/100/100" />
<input id="imageUpload" type="file" 
       name="profile_photo" placeholder="Photo" required="" capture>

Image preview

You can also give the user a preview of the uploaded image:

function previewProfileImage( uploader ) {   
    //ensure a file was selected 
    if (uploader.files && uploader.files[0]) {
        var imageFile = uploader.files[0];
        var reader = new FileReader();    
        reader.onload = function (e) {
            //set the image data as source
            $('#profileImage').attr('src', e.target.result);
        }    
        reader.readAsDataURL( imageFile );
    }
}

$("#imageUpload").change(function(){
    previewProfileImage( this );
});

Efficiency note: You can make it more efficient if you use createObjectURL instead of reading data as URL.

function fasterPreview( uploader ) {
    if ( uploader.files && uploader.files[0] ){
          $('#profileImage').attr('src', 
             window.URL.createObjectURL(uploader.files[0]) );
    }
}

As you can see here in MDN, the URL.createObjectUrl will just generate the URL for the file instead of having to load it into the DOM, which is definitely preferable for large files.

Circular image crop

To display the image cropped in a circle, you will need to give it an outer div and apply border-radius to it:

HTML:

<div id="profile-container">
   <image id="profileImage" src="aDefaultImage.png" />
</div>

CSS:

#profile-container {
    width: 150px;
    height: 150px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

Complete solution

This snippet puts together all three steps:

$("#profileImage").click(function(e) {
    $("#imageUpload").click();
});

function fasterPreview( uploader ) {
    if ( uploader.files && uploader.files[0] ){
          $('#profileImage').attr('src', 
             window.URL.createObjectURL(uploader.files[0]) );
    }
}

$("#imageUpload").change(function(){
    fasterPreview( this );
});

#imageUpload
{
    display: none;
}

#profileImage
{
    cursor: pointer;
}

#profile-container {
    width: 150px;
    height: 150px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

#profile-container img {
    width: 150px;
    height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-container">
   <image id="profileImage" src="http://lorempixel.com/100/100" />
</div>
<input id="imageUpload" type="file" 
       name="profile_photo" placeholder="Photo" required="" capture>

这篇关于在HTML和CSS中添加表单中的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆