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

tonwei139

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