我正在进行一个 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
,但安全总比后悔好)
注意:这需要 File插件,并且根据您的 Cordova 和 File 版本,可能需要进行一些编辑(因为 API 在不同版本之间略有变化)。
关于javascript - 使用文件传输的 Cordova 多图像上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27502838/