我们使用 Jquery Mobile UI 1.4.5 开发示例移动混合移动应用程序。
在此应用程序中，我们必须*上传和预览图片， Mobilefirst Platform 7.1控制台 仅工作 无法预览
当我登录移动设备时，无法打开移动本地存储中的图库。我无法在本地移动存储中选择图像
我想在移动设备中上传和预览请任何人帮助我缺少什么以及必须做什么
$(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>
答案 0 :(得分：1)
＆lt; a href =“＃”onclick =“SelectImage（）”＆gt;选择图片＆lt; / a＆gt;
function onCapturePhoto(fileURI) {
$("#imagePreview").css("background-image", "url("+fileURI+")");
}
function SelectImage() {
navigator.camera.getPicture(onCapturePhoto,
function onFail(){
alert('Failed');
}, {
quality: 100,
destinationType: destinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
encodingType: Camera.EncodingType.JPEG
});
}