上传后将图像文件名保存到数据库中 - phonegap

时间:2015-05-11 18:00:21

标签: cordova asp-classic phonegap-plugins

使用以下脚本处理phonegap项目,在该项目中我将文件上传到远程服务器。

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
    <style type="text/css">
        div {border: 1px solid black;}
        input {width: 100%;}
    </style>
   <script src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    var deviceReady = false;

    /**
     * Take picture with camera
     */
    function takePicture() {
        navigator.camera.getPicture(
            function(uri) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                img.src = uri;
                document.getElementById('camera_status').innerHTML = "Success";
            },
            function(e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            },
            { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI});
    };

    /**
     * Select picture from library
     */
    function selectPicture() {
        navigator.camera.getPicture(
            function(uri) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                img.src = uri;
                document.getElementById('camera_status').innerHTML = "Success";
            },
            function(e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            },
            { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY});
    };

    /**
     * Upload current picture
     */
    function uploadPicture() {

        // Get URI of picture to upload
        var img = document.getElementById('camera_image');
        var imageURI = img.src;
        if (!imageURI || (img.style.display == "none")) {
            document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
            return;
        }

        // Verify server has been entered
        server = document.getElementById('serverUrl').value;
        if (server) {

            // Specify transfer options
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";
            options.chunkedMode = false;
            options.headers = {
        Connection: "close"
    }
    options.chunkedMode = false;

            // Transfer picture to server
            var ft = new FileTransfer();
            ft.upload(imageURI, 'http://mywebsite/upload.asp', function(r) {
                document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";              
            }, function(error) {
                document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;               
            }, options);
        }
    }

    /**
     * View pictures uploaded to the server
     */
    function viewUploadedPictures() {

        // Get server URL
        server = document.getElementById('serverUrl').value;
        if (server) {

            // Get HTML that lists all pictures on server using XHR 
            var xmlhttp = new XMLHttpRequest();

            // Callback function when XMLHttpRequest is ready
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState === 4){

                    // HTML is returned, which has pictures to display
                    if (xmlhttp.status === 200) {
                        document.getElementById('server_images').innerHTML = xmlhttp.responseText;
                    }

                    // If error
                    else {
                        document.getElementById('server_images').innerHTML = "Error retrieving pictures from server.";
                    }
                }
            };
            xmlhttp.open("GET", server , true);
            xmlhttp.send();         
        }   
    }

    /**
     * Function called when page has finished loading.
     */
    function init() {
        document.addEventListener("deviceready", function() {deviceReady = true;}, false);
        window.setTimeout(function() {
            if (!deviceReady) {
                alert("Error: PhoneGap did not initialize.  Demo will not run correctly.");
            }
        },2000);
    }



    </script>

  </head>
  <body onload="init();">
    <h3>PhoneGap Camera Upload Demo</h3>

    <div>
      <h3>Server URL for upload.asp:</h3>
        <input id="serverUrl" type="text" value="http://mywebsite/pictures.asp" />
    </div>
    <br/>

    <!-- Camera -->
    <div>
        <h3>Camera:</h3>
        <b>Status:</b> <span id="camera_status"></span><br>
        <b>Image:</b> <img style="width:120px;visibility:hidden;display:none;" id="camera_image" src="" />
    </div>

    <!-- Actions -->
    <div>
        <input type="button" onclick="takePicture();" value="Take Picture" /><br/>
        <input type="button" onclick="selectPicture();" value="Select Picture from Library" /><br/>
        <input type="button" onclick="uploadPicture();" value="Upload Picture" />
    </div>
    <br/>

    <!-- Server pictures -->
    <div>
        <h3>Server:</h3>
        <b>Images on server:</b>
        <div id="server_images"></div>
    </div>

    <!-- Actions -->
    <div>
        <input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" />
    </div>

  </body>
</html>

现在我想要实现的还是将图像文件保存到我的数据库中的表中。我正在使用此脚本进行保存但不能正常工作

<%

if(Request.QueryString("file") <> "") then cmd_insert__varpic = Request.QueryString("file")

%>
<%

set cmd_insert = Server.CreateObject("ADODB.Command")
cmd_insert.ActiveConnection = MM_connection_web_STRING
cmd_insert.CommandText = "INSERT INTO dbo.pics (pic)  VALUES ('" + Replace(cmd_insert__varpic, "'", "''") + "') "
cmd_insert.CommandType = 1
cmd_insert.CommandTimeout = 0
cmd_insert.Prepared = true
cmd_insert.Execute()

%>

0 个答案:

没有答案