jquery mobile 表單提交圖片/檔案上傳

最後更新：2017-09-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：type word equals ast meta mit 表單提交 query name

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>

</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 表單提交圖片/檔案上傳

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More