1. 程式人生 > >jfinal利用form表單同時上傳圖片和text

jfinal利用form表單同時上傳圖片和text

一:頁面

<form class="form-horizontal" action="/users/upload" method="post" enctype="multipart/form-data" name="myform" id="myform">
<input hidden="hidden" name="userId" id="userId" readonly="readonly" style="display: none;">
<div class="form-group  form-group-lg">
   <label for="name">姓名:</label>
   <input type="text" onblur="checkName()" onchange="checkName()" class="form-control" name="name" id="name" placeholder="姓名">
   <br><span id="nameerr" style="padding-left:5rem;color: red;"></span>
</div>
<div class="form-group  form-group-lg">
   <label for="telephone">手機號碼:</label>
   <input type="text" onblur="checkPone()" onchange="checkPone()" class="form-control" name="telephone" id="telephone" placeholder="手機號碼">
   <br><span id="phoneerr" style="padding-left:5rem;color: red;"></span>
</div>
<div class="form-group">
   <label for="cardNo">身份證號:</label>
   <input type="text" onblur="checkNum()" onchange="checkNum()" class="form-control" name="cardNo" id="num" placeholder="身份證號">
<br><span id="numerr" style="padding-left:5rem;color: red;"></span>
</div>
<div class="form-group">
   <label for="cardFront">身份證件:</label>
   <input type="file" onchange="checkPic1()" name="cardFront" accept="image/*" class="form-control" id="pic1">
   <span class="file">上傳手持身份證正面照片</span>
   <br><span id="pic1err" style="padding-left:5rem;color: red;"></span>
</div>
<div class="form-group">
   <label for="cardBehi">身份證件:</label>
   <input type="file" onchange="checkPic2()" accept="image/*" class="form-control" name="cardBehi" id="pic2">
   <span class="file">上傳手持身份證背面照片</span>
   <br><span id="pic2err" style="padding-left:5rem;color: red;"></span>
</div>
<div class="form-group">
   <label for="special">特殊證書:</label>
   <input type="file" onchange="checkPic3()" accept="image/*" class="form-control" name="special" id="pic3">
   <span class="file">上傳手持證書(有公章頁)照片</span>
   <br><span id="pic3err" style="padding-left:5rem;color: red;"></span>
</div>
<button type="submit" class="btn btn-primary btn-info btn-block">立即提交</button>
</form>

二:程式碼

public void upload() throws UnsupportedEncodingException {
HttpServletRequest req = getRequest();
req.setCharacterEncoding("UTF-8");
String userId = "";
String telephone = "";
String cardNo = "";
String name = "";
DiskFileItemFactory disk = new DiskFileItemFactory();
File ff = new File("d:");
if (ff.exists()) {
disk.setRepository(ff);// 設定臨時目錄,用於儲存臨時檔案
}
ServletFileUpload upload = new ServletFileUpload(disk);
try {
List<FileItem> list = upload.parseRequest(req);
List<Map<String, Object>> files = new ArrayList<>();
String path = req.getServletContext().getRealPath("/users");
for (int i = 0; i < list.size(); i++) {
FileItem item = list.get(i);
String paths = "";
if (i == 4) {
paths = userId + "cardfront.jpg";
} else if (i == 5) {
paths = userId + "cardbehi.jpg";
} else if (i == 6) {
paths = userId + "cardspeci.jpg";
} else {
paths = userId + "2.jpg";
}
item.write(new File(path, paths));
item.delete();
if (item.isFormField()) { // 此處是判斷非檔案域,即不是<inputtype="file"/>的標籤
String n = item.getFieldName(); // 獲取form表單中name的id
if ("userId".equals(n)) {
userId = item.getString("utf-8");
} else if ("telephone".equals(n)) {
telephone = item.getString("utf-8");
} else if ("cardNo".equals(n)) {
cardNo = item.getString("utf-8");
} else if ("name".equals(n)) {
name = item.getString("utf-8");
}
}
}
boolean boo = UserService.me.addSpecial(name, userId, telephone, cardNo);
} catch (Exception e) {
throw new RuntimeException(e);
}
renderJson(123);
}

三:結果



相關推薦

jfinal利用form同時圖片text

一:頁面 <form class="form-horizontal" action="/users/upload" method="post" enctype="multipart/form-data" name="myform" id="myform"><

mvc 利用form檔案

前端頁面 <form action="/my/reviewdata" method="post" enctype="multipart/form-data"> <input class="imgx" name="img" type="file" multiple="mult

form圖片及展示

pen bdc type comm 之前 jpg ctype turn ali .comment_con .file{position: relative;top:2rem;z-index: 999;width: 5rem;height: 5rem;background:

Jquery不使用form非同步檔案的方法

    現在的專案中需要使用到不重新整理頁面的方式實現上傳檔案,實現方法如下: html程式碼:   檔案:<input id="file" type="file" name="file"/> <butt

Ajax(form檔案、請求頭之contentType、Ajax傳遞json資料)

form表單檔案上傳 上菜 file_put.html <form action="" method="post" enctype="multipart/form-data"> {# 這裡必須要請求頭格式才能把上傳檔案的物件傳過去 enctype="multipart/form-

springmvc中Form檔案使用ajax提交

上傳檔案這塊坑真是不少,耽誤了有幾個小時的時間,現在簡單總結一下; 首先springmvc的核心xml中配置下MultipartResolver: <!-- 配置 MultipartResolver -->     <bean id="multipart

window.showModalDialog()使用與form檔案以及父子頁面

window.showModalDialog()簡介: (1)使用方法:  window.showModalDialog(sURL [, vArguments] [,sFeatures]) (2)引數說明 sURL--必選引數,型別:字串。用來指定對話方塊要顯示的頁面的

form檔案方法

普通的表單資料 servlet中的程式碼 在上傳檔案時需要在表單屬性中加enctype,改成二進位制的方法上傳資料  此時就不能使用getparameter的方法 可以使用apache的一個上傳檔案的jar @WebServlet("/upload") publi

Form檔案

1.form標籤: <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="file"

JS 將form檔案 一起提交

前提 需要引入jquery(不然無法使用$.ajax) //js function add(){ var formData = new FormData(document.querySelector("form"));//獲取form值

CURL模擬post提交及相關常用引數的使用(包括提交同時檔案)

<form action="doLogin" method="post"> <input type="text" name="username" value="admin"/> <input type="password" nam

C# Asp.net使用FormData對象實現ajax提交圖片

sync ext syn data .... error post req 序列化 1、html代碼: <form id="postForm"> 文件名:<input type="text" name="filename" />

FormData物件提交圖片/檔案

1.建立一個FormData空物件,然後使用append方法新增key/value var formdata = new FormData(); formdata.append('name','fdipzone'); formdata.append('gender','male');

axios在vue中的應用(二)—— 提交圖片

使用axios實現圖片預覽、圖片上傳等功能: methods: { // 圖片預覽 priviewImg(e) { // ... }, // 提交表單 sumitRefund() { let fd = new FormDat

怎麼用非同步ajax提交圖片檔案?

通常我們提交(使用submit button)時,會把form中的所有表格元素的name與value組成一個queryString,提交到後臺。這用jQuery的方法來說,就是serialize。通過$('#postForm').serialize()可以對form表單進行序

使用FormData物件提交圖片

FormData 物件,可以把form中所有表單元素的name與value組成一個queryString,提交到後臺。在使用Ajax提交時,使用FormData物件可以減少拼接queryString的

PHP結合HTML5使用FormData物件提交圖片

FormData 物件,可以把form中所有表單元素的name與value組成一個queryString,提交到後臺。在使用Ajax提交時,使用FormData物件可以減少拼接queryString的工作量。 使用FormData物件 1.建立一個FormData空物

使用formData物件提交圖片

FormData 物件,可以把form中所有表單元素的name與value組成一個queryString,提交到後臺。如果把表單的編碼型別設定為:enctype =‘multipart/form-da

ajax 請求後臺資料(及使用FormData物件提交圖片

js <script type="text/javascript"> $(function(){ $('#submit').click

如何使用elementUI呼叫一次介面同時圖片檔案,同時需要攜帶其他引數,實現呼叫後端介面

今天有一個坑,同時要上傳圖片和檔案,而且圖片要展示縮圖,檔案要展示列表。 我的思路是: 首先,只上傳附件照片,這個直接看ele的官方例子就行,不僅僅上傳附件照片,還同時上傳其他引數。 然後,再做上傳照片和檔案,上傳其他引數,其實也就是檔案合併。   一、上傳照片和其他引