1HTML5 写好了 通过phonegap打包成APK后 发现文件上传无法使用
HTML5是相对路径, apk里必须是绝对路径访问外网服务器的。
2 先用JQUERY+uploadify 实现跨域上传
第一步 写JS (因为服务端已经写完了)
$(document).ready(function () {
var historyStr = "";
var completStr = "";
var errorStr = "";
$("#file_upload").uploadify({
'swf': 'commond-plug/uploadify/uploadify.swf',
/* 'uploader': '../servlet/Upload', */
'uploader': 'http://10.81.66.176:8080/NongGu/servlet/Upload',
'buttonText': '选择图片...',
'fileSizeLimit': '4000KB',//文件最大容量
'fileTypeDesc': '图片文件', //文件类型说明
'fileTypeExts': '*.gif; *.jpg; *.png',//限定可以上传的文件类型
/* 'fileTypeDesc' : '所有文件', //文件类型说明
'fileTypeExts' : '*.*',//限定可以上传的文件类型*/
'formData': {'someKey': 'someValue', 'someOtherKey': 1}, //好像是可以带参数
'height': 30, //按钮 高度 默认30
'width': 90, //按钮宽度
'method': 'post', //默认post
'multi': true, //支持多文件,默认为true
'progressData': 'speed', //进度条类型,默认 percentage
'queueID': 'file_queue', //进度条 在哪里显示,可以不设置
'queueSizeLimit': 2, //每次提交的数量(multi =true才有意义),默认999
'removeCompleted': true,//是否在任务列表 删除 历史记录 默认 true
// 'removeTimeout' : 10, //不知道什么意思
'successTimeout': 5, //默认30
'uploadLimit': 3, //一次会话中运行的上传数量 默认999 ,
'auto': false,
'onUploadStart': function (file) {
$("#file_upload").uploadify("settings", "formData", {'someKey': 'zms', someOtherKey: 22});
// console.log('Attempting to upload: ' + file.name);
historyStr = historyStr + "\n" + file.name;
$("#history").text("历史" + historyStr);
},
'onUploadSuccess': function (file, data, response) {
$("#complet").text('文件file.name: ' + file.name + '已经上传成功 ,返回的数据response: ' + response + 'data:' + data);
//把取回来的URI 转码,因为url可能包含中文,会变成乱码。
location.href=encodeURI(encodeURI(data));
},
/* onComplete : function (event, queueID, fileObj, response, data)
{
alert("beyond");
completStr=completStr+"\n"+response;
$("#complet").text("这里是返回的"+completStr);
},*/
onError: function (event, queueID, fileObj) {
alert("文件:" + fileObj.name + " 上传失败");
}
});
HTML:
<body>
图片上传2:
<div id="file_queue">
<p><a href="javascript:$('#file_upload').uploadify('upload')">上传文件</a></p>
</div>
<div id="history"></div>
<br>
<div id="complet"></div>
<br>
<div id="error"></div>
<input type="file" name="file_upload" id="file_upload"/>
</body>
第二步: 修改tomcat的配置,在weapps/Root 里增加一个文件 crossdomain.xml
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>
3 然后 我又把html代码打包apk
运行的时候,后台报错说 ,我在安卓里 增加了 interact-across 权限也没有用
艾,看来安卓版的只能使用 phonegap 改造HTML5, 这样 htmL5代码 就和安卓的代码不一致了。。
4 最后贴上 java服务端的代码,写一个servlet
package zms.zte.servlet;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.servlet.ServletRequestContext;
//需要 commons-fileupload-1.2.2 commons-io-1.3.2
@SuppressWarnings("serial")
public class Upload extends HttpServlet {
private String uploadPath=" "; // 上传文件的目录
private String tempPath=" ";// 临时文件目录
File tempPathFile;
private String time="";
private String type="";
private String xingtai="";
private String num="";
private String imageurl="";
@SuppressWarnings("unchecked")
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
try {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
ServletContext s1=this.getServletContext();
String temp=s1.getRealPath("/");
//uploadPath= request.getContextPath()+"\\files";
uploadPath=temp+ "files";
System.out.println("路径:"+uploadPath);
tempPath=uploadPath;
DiskFileItemFactory factory = new DiskFileItemFactory();
// Set factory constraints
factory.setSizeThreshold(4096); // 设置缓冲区大小,这里是4k
factory.setRepository(tempPathFile);// 设置缓冲区目录
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
//解决中文乱码问题
upload.setHeaderEncoding("utf-8");
// Set overall request size constraint
upload.setSizeMax(41943044); // 设置最大文件尺寸,这里是4MB
List<FileItem> items = null;
try {
items = upload.parseRequest(request);// 得到所有的文件
} catch (Exception ex) {
System.out.println("没有传文件过来");
ex.printStackTrace();
return;
}
Iterator<FileItem> i = items.iterator();
while (i.hasNext()) {
FileItem fi = (FileItem) i.next();
String fileName = fi.getName();
if (fileName != null) {
File fullFile = new File(fi.getName());
File savedFile = new File(uploadPath, fullFile.getName());
fi.write(savedFile);
imageurl=fullFile.getName();
System.out.println("存储文件:"+imageurl);
// response.setContentType("text/html;charset=UTF-8");
// response.setHeader("Cache-Control", "no-cache");
//PrintWriter out = response.getWriter();
// out.write("返回内容"+fullFile.getName());
// out.flush();
// out.close();
}
else
{
//获取参数
String fieldName = fi.getFieldName();
if (fieldName.equalsIgnoreCase("role1"))
{
type=fi.getString("UTF-8");
System.out.println("类型:"+type);
}
if (fieldName.equalsIgnoreCase("mydate1"))
{
time= fi.getString("UTF-8");
System.out.println("时间:"+time);
}
if (fieldName.equalsIgnoreCase("c"))
{
xingtai = fi.getString("UTF-8");
System.out.println("形态:"+xingtai);
}
if (fieldName.equalsIgnoreCase("num"))
{
num = fi.getString("UTF-8");
System.out.println("数量:"+num);
}
}
}
System.out.print("上传成功");
String url="infocz.html?time="+time+"&type="+type+"&xingtai="+xingtai+"&imagename="+imageurl+"&num="+num;
System.out.println(url);
out.write(url);
out.flush();
out.close();
// response.sendRedirect(url);
} catch (Exception e) {
// 可以跳转出错页面
System.out.println("大try出错");
e.printStackTrace();
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req,resp);
}
public void init() throws ServletException {
File uploadFile = new File(uploadPath);
if (!uploadFile.exists()) {
uploadFile.mkdirs();
}
File tempPathFile = new File(tempPath);
if (!tempPathFile.exists()) {
tempPathFile.mkdirs();
}
}
}