Wavemaker和 apache cordova混合开发之圖片上傳

cordova結合wavemaker手機圖片上傳實現

1.增加cordova插件

* cordova plugin add org.apache.cordova.camera

* cordova plugin add org.apache.cordova.file

* cordova plugin add org.apache.cordova.file-transfer

2.在cordova的config.xml配置文件中增加如下屬性

<gap:plugin name="org.apache.cordova.file" />

<gap:plugin name="org.apache.cordova.file-transfer" />

<gap:plugin name="org.apache.cordova.camera" />

3.修改wavemaker構建出的phonegap項目中的index.html文件

4.修改wavemakerr構建出的phonegap項目中的lib\build\Gzipped下wm_phonegap_misc.js文件

1）if(window["PhoneGap"])改成

if(window["PhoneGap"] || window["cordova"])

2）destinationType:Camera.DestinationType.DATA_URL改成

destinationType:Camera.DestinationType.FILE_URI

3）d.callback({dataValue:“data:image/jpeg;base64,”+_43}改成

d.callback({dataValue:_43}修改成FILE_URI是因為插件file-transfer上傳時需要FILE_URI

5,直接利用wavemaker創建一個PhoneGapCall service，operation選擇capture_picture；創建一個Button，點擊時調用這個service，將得到的圖片顯示出來；再創建一個button，點擊上傳，wavemaker的腳本如下：

phoneGapBrowsePictureSuccess: function(inSender, inDeprecated) {

this.tempPicture.setSource(inSender.getValue("dataValue"));

this.uploadFileURL.setValue("dataValue",inSender.getValue("dataValue"));

phoneGapBrowsePictureError: function(inSender, inError) {

app.alert(inError);

uploadBtnClick: function(inSender) {

var fileURL=this.uploadFileURL.getValue("dataValue");

app.alert(fileURL);

var uri = encodeURI("http://192.168.88.126:8400/FileServer/servlet/PhoneGapFileServlet");

var options = new FileUploadOptions();

options.fileKey="file";

options.fileName=fileURL.substr(fileURL.lastIndexOf('/')+1);

options.mimeType="image/jpeg";

var params = {};

//params.file = fileURL;

options.params = params;

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

options.headers = headers;

var ft = new FileTransfer();

ft.upload(fileURL, uri, this.win, this.fail, options);

win: function(r) {

app.alert("Code = " + r.responseCode);

console.log("Code = " + r.responseCode);

console.log("Response = " + r.response);

console.log("Sent = " + r.bytesSent);

fail: function(error) {

console.log(error);

app.alert("An error has occurred: Code = " + error.code);

console.log("upload error source " + error.source);

console.log("upload error target " + error.target);

6，Servlet寫法如下

package com.yonghong;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import java.io.OutputStream;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.DiskFileUpload;

import org.apache.commons.fileupload.FileItem;

import org.apache.commons.fileupload.FileUploadException;

import org.apache.commons.fileupload.disk.DiskFileItemFactory;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class PhoneGapFileServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html,charset=utf-8");

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

try{

File file1=null;

DiskFileItemFactory fac = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(fac);

List<FileItem> list = upload.parseRequest(request);

for(FileItem fileItem:list){

if(fileItem.isFormField()){

System.out.println("is form field");

}else{

System.out.println("start upload:"+fileItem.getFieldName());

if("file".equals(fileItem.getFieldName())){

File remoteFile = new File(new String(fileItem.getName().getBytes(),"UTF-8"));

file1 = new File(this.getServletContext().getRealPath("/WEB-INF"),remoteFile.getName());

file1.getParentFile().mkdirs();

file1.createNewFile();

InputStream ins = fileItem.getInputStream();

OutputStream ous = new FileOutputStream(file1);

try{

byte[] buffer = new byte[1024];

int len=0;

while((len=ins.read(buffer))>-1){

ous.write(buffer, 0, len);

}

}finally{

ous.close();

ins.close();

}

}catch(FileUploadException e){

e.printStackTrace();

}

附上www的源碼

Wavemaker和 apache cordova混合开发之圖片上傳

猜你喜欢