Fatal编程技术网
  • cordova/
  • Cordova 无法进行图像上载和预览

Cordova 无法进行图像上载和预览

cordova jquery-mobile file-upload ibm-mobilefirst

Cordova 无法进行图像上载和预览,cordova,jquery-mobile,file-upload,ibm-mobilefirst,preview,Cordova,Jquery Mobile,File Upload,Ibm Mobilefirst,Preview,我们使用Jquery mobile UI 1.4.5开发示例移动混合移动应用程序 在这个应用程序中，我们必须*上传和预览图像，只能在Mobilefirst Platform 7.1控制台中上传而不能预览 当我签入移动设备时它不会打开移动本地存储中的库。我无法在本地移动存储中选择图像 我想在移动设备中上传和预览，请任何人帮助我，我缺少什么，我该做什么 $(function() { $("#uploadFile").on("change", function() {

我们使用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

HTML


登记
window.$=window.jQuery=WLJQ；
用户注册
极不*
会员身份证*
电子邮件ID*
手机号码*
密码*
确认密码*
登记

你能检查一下吗？它只在控制台中工作，不在设备中工作。你做了什么改变？你能更新这个问题吗？我在JSFIDLE中使用了什么代码？我在控制台和设备中签入了设备无法打开本地内存库选择pic（图像）你能看到这个答案吗 
.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;
} 

<!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>

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
  });
 }