jquery mobile 表单提交 图片/文件 上传
jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败
1 html代码
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquerymobile1.4.0-green/zms-green.css"/>
<link rel="stylesheet" href="jquerymobile1.4.0-green/jQuery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquerymobile1.4.0-green/jquery.mobile.structure-1.4.0.css" />
<link rel="stylesheet" href="css/my.css" />
<script src="commond-plug/jquery.min.js" type="text/JavaScript"></script>
<script src="jquerymobile1.4.0-green/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<title>HTML-ZMS</title>
<script>
$(document).ready(function () {
});
</script>
<stytle>
</stytle>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" style="background: #ff6932;color: #ffffff;text-shadow: none;">
<h1>Jquery mobile 1.4</h1>
<!-- <a href="#" class="ui-btn">返回</a>-->
</div>
<div class="ui-content">
<div class="file-box">
<form action="../servlet/phonegapUp" method="post" enctype="multipart/form-data" data-ajax="false">
<input type="text" id="zms" name="zms">
<input type="text" id="value1" name="value1">
<input type="text" id="value2" name="value2">
<input type="file" accept="image/png" name="fileField" id="fileField" />
<input type="submit" name="submit" class="btn" value="上22传" />
</form>
</div>
</div>
<div data-role="footer" data-position="fixed" style="background: #ff6932;color: #ffffff;text-shadow: none;">
<h4>中兴长天(南昌)信息技术有限公司</h4>
</div>
</div>
</body>
</html>
2 服务端代码 新建一个servlet,修改 dopost代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
Date date = new Date();//获取当前时间
SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
//SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");
String newfileName = sdfFileName.format(date);//文件名称
String fileRealPath = "";//文件存放真实地址
String firstFileName="";
// 获得容器中上传文件夹所在的物理路径 如果按日期存放,则可以在files\\后面继续加 sdFolder+"\\"
String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "files\\";
/* System.out.println("路径" + savePath+"; name:"+name); */
System.out.println("路径" + savePath);
File file = new File(savePath);
if (!file.isDirectory()) {
file.mkdirs();
}
try {
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
// 获取多个上传文件
List fileList = fileList = upload.parseRequest(request);
// 遍历上传文件写入磁盘
Iterator it = fileList.iterator();
while (it.hasNext()) {
FileItem obit = (FileItem)it.next();
//如果是普通 表单参数
if(obit.isFormField()){ //普通域,获取页面参数
String field = obit.getFieldName();
if(field.equals("value1"))
{
System.out.println(obit.getString("UTF-8"));
}
else if(field.equals("value2")){
System.out.println(obit.getString("UTF-8"));
}
}
// 如果是 多媒体
if(obit instanceof DiskFileItem){
DiskFileItem item = (DiskFileItem) obit;
// 如果item是文件上传表单域
// 获得文件名及路径
String fileName = item.getName();
if (fileName != null) {
firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);
String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名
fileRealPath = savePath + newfileName + formatName;//文件存放真实地址
BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
//上传成功,
if (new File(fileRealPath).exists()) {
//虚拟路径赋值
// fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);
//保存到数据库
System.out.println("上传成功了, 您还可以做其他操作");
//System.out.println("虚拟路径:"+fileRealResistPath);
response.getWriter().write(fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1));
}
}
}
}
} catch (org.apache.commons.fileupload.FileUploadException ex) {
ex.printStackTrace();
System.out.println("没有上传文件");
return;
}
/* response.getWriter().write("1"); */
}
data-ajax="false" 是重点,终于解决了
jquery mobile 表单提交 图片/文件 上传的更多相关文章
- node07---post请求、表单提交、文件上传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【ASP.NET Web API教程】5.3 发送HTML表单数据:文件上传与多部分MIME
原文:[ASP.NET Web API教程]5.3 发送HTML表单数据:文件上传与多部分MIME 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面 ...
- JavaScript实现form表单的多文件上传
form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式 ...
- 基于hi-nginx的web开发(python篇)——表单处理和文件上传
hi-nginx会自动处理表单,所以,在hi.py框架里,要做的就是直接使用这些数据. 表单数据一般用GET和POST方法提交.hi-nginx会把这些数据解析出来,放在form成员变量里.对pyth ...
- (27) java web的struts2框架的使用-基于表单的多文件上传
和单个文件上传配置都是一样的,只是在action中接受参数时候,接受的是数组,不再是单个的文件. 一,action的实现: public class MutableFilesUpload extend ...
- (转)WebApi发送HTML表单数据:文件上传与多部分MIME
5.3 Sending HTML Form Data5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/282 ...
- WebApi发送HTML表单数据:文件上传与多部分MIME
5.3 Sending HTML Form Data5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/282 ...
- 学习SpringMVC必知必会(7)~springmvc的数据校验、表单标签、文件上传和下载
输入校验是 Web 开发任务之一,在 SpringMVC 中有两种方式可以实现,分别是使用 Spring 自带的验证 框架和使用 JSR 303 实现, 也称之为 spring-validator 和 ...
- form表单系列中文件上传及预览
文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...
随机推荐
- 【Qt编程】Qt学习笔记<三>
1. 如果程序中使用了png以外格式的图片,在发布程序时就要将Qt安装目录下plugins中的imagineformats文件复制到发布文件中. 2. 在函数声明处快速添加函数定义 ...
- Unable To Import Or Enter Sale Order - ORA-20001: APP-FND-01564: ORACLE error - 1422 in get_seq_info
In this Document Symptoms Cause Solution APPLIES TO: Oracle Order Management - Version 12.0.4 ...
- how tomcat works 读书笔记(二)----------一个简单的servlet容器
app1 (建议读者在看本章之前,先看how tomcat works 读书笔记(一)----------一个简单的web服务器 http://blog.csdn.net/dlf123321/arti ...
- linux设置系统时间
设置系统时间 - date命令:显示系统的时间,可以在直接输入"date"命令来查看系统的时间 - date+%y/%m/%d - ...
- iOS 10正式发布:十大新功能,更注重人性化
6月14日凌晨消息,苹果公司举行2016年WWDC全球开发者大会,介绍了watch OS.tv OS.OS X以及iOS 10系统的新特性. 据苹果介绍,iOS 10在锁屏.Siri.地图等十个各方面 ...
- "《算法导论》之‘字符串’":字符串匹配
本文主要叙述用于字符串匹配的KMP算法. 阮一峰的博文“字符串匹配的KMP算法"将该算法讲述得非常形象,可参考之. 字符串‘部分匹配值’计算 KMP算法重要的一步在于部分匹配值的计算.模仿& ...
- MTU 最大传输单位
MTU 最大传输单位 通过上面 MAC 封装的定义,现在我们知道标准以太网络frame所能传送的数据量最大可以到达 1500 bytes , 这个数值就被我们称为 MTU (Maximum Trans ...
- ORACLE ERP各模块会计分录
ORACLE ERP各模块会计分录 第一章 采购模块 一.资产采购(科目来源:库存组织) 1.物料接收 借 材料采购 接收数量*采购单价 贷 应计暂估 接收数量*采购单价 2 ...
- HBase Master 启动
–>首先初始化HMaster –>创建一个rpcServer,其中并启动 –>启动一个Listener线程,功能是监听client的请求,将请求放入nio请求队列,逻辑如下: –&g ...
- SharePoint WebPart 简单的读取列表内容的web部件
最近,自己也在学习写一些SharePoint的部件,也就是使用对象模型,下面,介绍一下自己刚刚写的小测试程序,不足之处,还请指正. 1. 新建项目 Vs2008 – 新建 – 项目 – 类库 – 输 ...