cordova - Cordova文件传输 - cordova教程 , 学习cordova , cordova android , cordova ios



  • 这个插件是用于上传和下载文件。
cordova教程 - cordova - 
学习cordova - 
cordova plugin -Cordova文件系统 - Cordova plugin 生成 -  
- Cordova文件传输 - apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - Cordova文件系统 - apache cordova网址访问 - Cordova plugin 生成 - - Cordova文件传输 - apache cordova的例子

Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

第1步 - 安装文件传输插件

  • 打开命令提示符,运行以下命令来安装插件。
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第2步 - 创建按钮

  • 在本章中,我们将学习如何上传和下载文件。让我们创建index.html中两个按钮
<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第3步 - 添加事件监听器

  • 在index.js onDeviceReady函数内创建事件侦听器。 增加点击事件和回调函数如下。
document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

步骤4A- 下载函数

  • 这个功能将用于从服务器下载文件到设备。 我们演示上传文件到 postimage.org。 你可能会使用自己的服务器。 这个函数放置在index.js并按下相应的按钮时触发。uri 是服务器下载链接以及 fileURI 路径是设备上的DCIM文件夹。
function downloadFile() {

   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },
		
      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },
		
      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
} 
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 当我们按下下载按钮,文件将从postimg.org服务器上下载到我们的移动设备。我们可以查看指定的文件夹,看到 myFile 是存在的。
cordova教程 - cordova - 
学习cordova - 
cordova plugin -Cordova文件系统 - Cordova plugin 生成 -  
- Cordova文件传输 - apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - Cordova文件系统 - apache cordova网址访问 - Cordova plugin 生成 - - Cordova文件传输 - apache cordova的例子

  • 控制台输出看起来就像这样 -
 storage image

学习cordova - cordova教程 - 存储图像 - cordova示例 - cordova程序

步骤4B - 上传函数

  • 现在我们创建函数,选择文件并将其上传到服务器。再次,我们希望能够尽可能简化,所以将使用 posttestserver.com 在线服务器进行测试。uri的值将链接提交到 posttestserver。
function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
	
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";

   var headers = {'headerParam':'headerValue'};
   options.headers = headers;

   var ft = new FileTransfer();

   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }
	
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
cordova教程 - cordova - 
学习cordova - 
cordova plugin -Cordova文件系统 - Cordova plugin 生成 -  
- Cordova文件传输 - apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - Cordova文件系统 - apache cordova网址访问 - Cordova plugin 生成 - - Cordova文件传输 - apache cordova的例子

  • 现在,我们可以按下UPLOAD 按钮来触发此函数。我们将得到的控制台输出,确认上传成功。
 data 1

学习cordova - cordova教程 - 数据1 - cordova示例 - cordova程序

  • 我们也可以检查服务器,以确定该文件已经被上传了。
 data 2

学习cordova - cordova教程 - 数据2 - cordova示例 - cordova程序


wikitechy provides you the following points such as cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova api , cordova-android , phonegap cordova , cordova plugin , cordova下载 , apache cordova是什么 , cordova cli , cordova plugin开发 , apache cordova教程 , cordova 教程 , vue cordova , ngcordova , ionic cordova , cordova plugin file , cordova 安装 , ionic 会取代cordova么 , cordova怎么样 , cordova插件开发 ,cordova菜鸟教程 , cordova react , cordova ionic vuejs , 菲律宾cordova岛 , cordova 持续定位 , phonegap , cordoba , cordova plugins , cardova , apache cordova , cordova phonegap , ionic cordova phonegap , apache cordova alternatives , cordova for visual studio , best ide for cordova development , create cordova plugin android , cordova ios 4 , apache cordova download , cordova build command , cordova web support , cordova webview android , how to install cordova , phonegap developer , apache cordova ionic , cordova command

Related Searches to Cordova文件传输