[英]Add a Profile Picture in form in HTML and CSS
我正在創建一個表單,在該表單中我需要用戶的個人資料圖片,並且我希望圖片是圓形或矩形的。 默認情況下,圖像區域應為黑色或虛擬圖片。 當用戶點擊該區域時,他/她可以選擇一個圖像,就像在 Facebook 或 Twitter 上上傳的個人資料圖片一樣。
我的表格
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>
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/
您可以做的是隱藏輸入,就像單擊個人資料圖像時單擊它一樣:
$("#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>
您還可以向用戶提供上傳圖像的預覽:
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 );
});
效率說明:如果使用createObjectURL
而不是將數據作為 URL 讀取,則可以提高效率。
function fasterPreview( uploader ) {
if ( uploader.files && uploader.files[0] ){
$('#profileImage').attr('src',
window.URL.createObjectURL(uploader.files[0]) );
}
}
正如您在MDN 中看到的, URL.createObjectUrl
只會生成文件的 URL,而不必將其加載到 DOM 中,這對於大文件來說絕對是可取的。
要顯示裁剪成圓形的圖像,您需要給它一個外部div
並對其應用border-radius
:
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%;
}
此代碼段將所有三個步驟放在一起:
$("#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>
$("#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>
將圖像標簽與默認圖像分開插入,然后在通過輸入標簽選擇圖像的同時讀取 URL。
<img id="profile" src="default.png" alt="profile-image" />
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#profile').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#image").change(function(){ readURL(this); //other uploading proccess [server side by ajax and form-data ] });
小提琴鏈接: https : //jsfiddle.net/7ao1qxLe/1/
您可以使用以下代碼應用此圖片選擇器
<img id="idcardfront" src="images/UploadImgPlaceholder.png" data-type="editable" />
<script>
$("#idcardfront").each(function (i, e) {
var _inputFile = $('<input/>')
.attr('type', 'file')
.attr('hidden', 'hidden')
.attr('id', 'idCardFrontFile')
.attr('onchange', 'readImage()')
.attr('data-image-placeholder', e.id)
.attr('Class', 'hidden');
$(e.parentElement).append(_inputFile);
$(e).on("click", _inputFile, triggerClick);
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.