We developing Sample mobile hybrid Mobile application Using Jquery Mobile UI 1.4.5.
In this application we have to do*upload and preview the image, it is working only upload not previewing in Mobilefirst Platform 7.1 console
and when i check in to mobile device it not opening the gallery in mobile local storage. i can not selecting the image in local mobile storage
I want to both upload and preview in mobile device please any one help what i am missing and what have to do
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
CSS
.heading_secod{
margin-bottom: 15px;
background-color: #CACACA;
width: 90%;
margin-left: 5%;
margin-right: 5%;
padding-bottom: 6px;
}
.reg_heading{
margin-top: 7px;
font-size: 22px;
font-weight: bold;
}
label {
margin-bottom: 0px !important;
font-weight: bold !important;
}
#imagePreview {
width: 128px;
height: 128px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!--CSS files starts here-->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="assets/css/bootstrap-select.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<link rel="stylesheet" href="assets/css/style.css">
<!--CSS files ends here-->
<!--Script files start here-->
<script src="assets/scripts/jquery.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="assets/scripts/bootstrap-select.js"></script>
<script src="assets/scripts/bootstrap.min.js"></script>
<script src="assets/scripts/script.js"></script>
<link rel="stylesheet" href="css/main.css">
<link href="jqueryMobile/jquery.mobile-1.4.5.css" rel="stylesheet">
<script src="jqueryMobile/jquery.mobile-1.4.5.js"></script>
<script src="js/initOptions.js"></script>
<!--Script files ends here-->
</head>
<body style="display: none;">
<div data-role="page" id="register_en" class="home-wrapper">
<div id="registerContent">
<div>
<!--Header Part-->
<div class="full-wrapper top_header_main">
<div class="container">
<div class="top_header">
<div class="page-title">
<div class="logo">
</div>
</div>
</div>
</div>
</div>
<!--Header Part-->
<!--Menu part-->
<div class="full-wrapper">
<div class="container pl-0 pr-0">
<div class="insurance-form">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 pr-0 heading_secod" align="center">
<h4 class="page-title reg_heading">USER REGISTRATION</h4>
</div>
<form role="form">
<div class="form-group">
<div class="col-md-12 form-group ">
<label>Poltical No*</label>
<input type="number" class="form-control" name="VehicleValue" placeholder="Policy Number" required="required" data-clear-btn="true" onKeyDown="if(this.value.length===15 && event.keyCode != 8)return false;">
</div>
<div class="col-md-12 form-group ">
<label>Membership ID*</label>
<input type="text" class="form-control" name="VehicleValue" placeholder="member Id" required="required" data-clear-btn="true" onKeyDown="if(this.value.length===13 && event.keyCode != 8)return false;">
</div>
<div class="col-md-12 form-group ">
<label>Email ID*</label>
<input type="email" class="form-control" name="VehicleValue" placeholder="Email Id" required="required" data-clear-btn="true" onKeyDown="if(this.value.length===64 && event.keyCode != 8)return false;">
</div>
<div class="col-md-12 form-group ">
<label>Mobile No*</label>
<input type="tel" class="form-control" name="VehicleValue" placeholder="Mobile Number" required="required" data-clear-btn="true" onKeyDown="if(this.value.length===15 && event.keyCode != 8)return false;">
</div>
<div class="col-md-12 form-group ">
<label>Password*</label>
<input type="password" class="form-control" name="VehicleValue" placeholder="Password" required="required" data-clear-btn="true" onKeyDown="if(this.value.length===8 && event.keyCode != 8)return false;">
</div>
<div class="col-md-12 form-group ">
<label>Confirm Password*</label>
<input type="password" class="form-control" name="VehicleValue" placeholder="Confirm Password" required="required" data-clear-btn="true" onKeyDown="if(this.value.length===8 && event.keyCode != 8)return false;">
</div>
<div class="col-md-12 form-group ">
<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />
</div>
<div class="col-md-12 form-group ">
<button class="btn btn-primary btn-default buy" onclick="registertoLogin()" >Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!--Menu Part-->
</div>
</div>
</div>
<script src="js/main.js"></script>
<script src="js/commonUtil.js"></script>
<script src="js/navigation.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
