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配置文件中增加如下屬性

<access origin="*" />

<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文件

<script type="text/javascript" src="phonegap.js"></script>改成如下

<script type="text/javascript" src="cordova.js"></script>

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的源碼