科尔多瓦多图像上传与文件传输

Cordova multiple image upload with File Transfer

本文关键字：文件 传输 图像      更新时间：2023-09-26

我正在做一个cordova和jquery移动项目。

我已经能够使用文件传输插件上传一张图像。现在我尝试上传以下 2 或 3 张图片。

这是 HTML 代码：

<label for="image">Pictures:</label>
<a href="" id="image1Button" class="ui-btn" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Get first picture</a><br>
<a href="" id="image2Button" class="ui-btn" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" style="display:none;">Get second picture</a><br>
<a href="" id="image3Button" class="ui-btn" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" style="display:none;">Get third picture</a><br>
<img id="image1" style="display:none;width:25%;">
<img id="image2" style="display:none;width:25%;">
<img id="image3" style="display:none;width:25%;">
<label for="title">Title</label>
<input data-clear-btn="true" name="title" id="title" value="" type="text">
<input value="Continue" type="submit" id="adButton">

以下是jquery代码：

multi_upload(user_id);
function multi_upload(user_id) {
    var image1 = "image1";
    var image2 = "image2";
    var image3 = "image3";
    if($('#image2').prop('src') == ''){
        // upload one file
        upload(user_id, image1, "true");
    }
    if($('#image3').prop('src') == ''){
        // upload two files
        upload(user_id, image1, "false");
        upload(user_id, image2, "true");
    }
    if($('#image3').prop('src') != ''){
        // upload three files
        upload(user_id, image1, "false");
        upload(user_id, image2, "false");
        upload(user_id, image3, "true");
    }
}
function upload(user_id, imagesrc, final) {
    var img = '';
    var imageURI = '';
    img = document.getElementById(imagesrc);
    imageURI = img.src;
    console.log("[imageURI] "+imageURI);
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    var params = {};
    params.timestamp = Math.round(+new Date()/1000);
    params.public_token = localStorage.getItem("token_public");
    params.hash = SHA1(params.timestamp+localStorage.getItem("token_private"));
    params.user_id = user_id;
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    if(final == "true"){
        ft.upload(imageURI, "http://www.example.com/api/index.php/privates/upload", finalwin, fail, options);
    }else{
        ft.upload(imageURI, "http://www.example.com/api/index.php/privates/upload", win, fail, options);
    }
}

例如，如果我上传两个文件，代码将上传上一张所选图片的两倍。 控制台给了我看起来像这样的 imageURI：

file:///storage/sdcard0/Android/data/fr.myproject.propro/cache/modified.jpg?1418726649440:500

我想这是一个临时文件，所以我假设当我选择最后一个文件时，它会删除前一个文件......如何找到此图像的真实路径？

我们最近遇到了同样的问题，发现缓存文件(project/cache/modified.jpg(被新选择覆盖(如您所注意的(，尽管FileTransfer.upload似乎将其视为两个不同的文件(可能是由于？-参数(，因此上传了两次。

作为一种解决方法，我们最终重命名了文件，以便在名称前包含时间戳，以便在上传文件之前modified.jpg?1418726649440变得1418726649440modified.jpg：

function renameFile(src, callback) {
    var d = new Date();
    //find the FileEntry for the file on the device
    window.resolveLocalFileSystemURL(src, function(fileEntry) {
        //get the parent directory (callback gives a DirectoryEntry)
        fileEntry.getParent(function(parent) {
            //rename the file, prepending a timestamp.
            fileEntry.moveTo(parent, d.getTime() + fileEntry.name, function(s) {
                //Callback with the new URL of the file.
                callback(s.nativeURL);
            }, function(error) {
                alert('Error on moving file!');
                callback(src); //Fallback, use the src given
            });
        }, function(error) {
            alert('Error on getting parent!');
            callback(src); //Fallback
        });
    }, function(error) {
        alert('Error on resolveLocalFileSystemURI!');
        callback(src); //Fallback
    });
}

src是 imageURI(即文件的路径(，callback是上传文件的函数。(我应该注意，我们不完全确定是否需要getParent调用，因为人们大概可以通过解析src来获得DirectoryEntry，但安全总比抱歉好(

注意：这需要文件插件，并且根据您的 Cordova 和 File 版本，可能需要进行一些编辑(因为 API 在版本之间发生了一些变化(。

相关文章：