Javascript 如何使用Ajax和Servlet上传文件
当我点击上传按钮时，什么也没发生 本页包括另一页。Javascript 如何使用Ajax和Servlet上传文件,javascript,java,jquery,ajax,jakarta-ee,Javascript,Java,Jquery,Ajax,Jakarta Ee,当我点击上传按钮时，什么也没发生 本页包括另一页。 所以我需要使用按钮点击，因为主页已经有另一个表单和提交按钮 我认为我的脚本代码失败了。 UploadImage.jsp EDIT=我添加了Servlet和jsp页面。第一个是UploadImage.jsp第二个是AddBand.jsp最后一个是servlet控制器isMultiPartContent方法在单击上载按钮时返回allways false。 <form id="uploadForm" > <div
所以我需要使用按钮点击，因为主页已经有另一个表单和提交按钮 我认为我的脚本代码失败了。 UploadImage.jsp EDIT=我添加了Servlet和jsp页面。第一个是UploadImage.jsp第二个是AddBand.jsp最后一个是servlet控制器isMultiPartContent方法在单击上载按钮时返回allways false。
<form id="uploadForm" >
<div class="form-group">
<label for="bandPicture">GRUP RESMİ</label>
<input type="file" accept="image/x-png,image/gif,image/jpeg" id="bandPicture" class="form-control" name="bandPicture">
<input type="button" id="uploadImage" class="btn-success" value="Upload">
<label id="uploadResult"></label>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#uploadImage').click(function(){
var form = $('#uploadform');
form.submit();
form.submit(function(){
$.ajax({
type: 'Post',
url: 'UploadImage',
data: form.serialize(),
enctype: 'multipart/form-data',
success: function(result) {
$('#uploadResult').html(result);
}
});
});
});
});
</script>
<html>
<head>
<title>Manhattan Live Performance</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="assets/css/style.css" rel="stylesheet" type="text/css"
media="all" />
<link href="assets/3thParty/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
<link href="assets/3thParty/css/bootstrap-theme.min.css"
rel="stylesheet" type="text/css" />
<script src="assets/3thParty/js/jquery-3.2.1.min.js"
type="text/javascript"></script>
<script src="assets/3thParty/js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
label {color:white !important}
</style>
</head>
<body>
<div class="header">
<jsp:include page="AdminHeader.jsp" />
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="AdminPanel/AddBand" method="Post" enctype="multipart/form-data">
<div class="form-group">
<label for="bandName">GRUP ADI</label>
<input type="text" id="bandName" class="form-control" name="bandName">
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label for="member">GRUP ÜYESİ</label>
<input type="text" id="member" class="form-control" name="member">
<input type="button" class="btn btn-success" style="float: right;" onClick="addMember();" value="Ekle">
</div>
<div class="col-md-8">
<label for="bandName">EKLENEN ÜYELER</label>
<select class="form-control" name="memberList" id="memberList"></select>
<input type="button" class="btn btn-success" style="float: right;" onClick="deleteMember();" value="Çıkar">
</div>
</div>
</div>
<div>
<jsp:include page="UploadImage.jsp"></jsp:include>
</div>
<div class="form-group">
<label >
<input type="checkbox">Haftalık Grup
</label>
</div>
<div class="form-group">
<label for="bandInfo">GRUP HAKKINDA</label></br>
<textarea class="form-control" id="editor" rows="6" name="bandInfo"></textarea>
</div>
<div class="form-group">
<input type="submit" id="submit" class="btn-success" value="GRUBU EKLE">
</div>
</form>
</div>
</div>
</div>
<div class="footer">
<jsp:include page="../Footer.jsp"></jsp:include>
</div>
<script type="text/javascript">
function addMember() {
var opt = document.createElement("option");
opt.text = document.getElementById("member").value;
opt.value = document.getElementById("member").value;
var select = document.getElementById("memberList");
select.appendChild(opt);
}
function deleteMember() {
var select = document.getElementById("memberList");
select.remove(select.selectedIndex);
}
</script>
</body>
</html>
public class UploadImageController extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 6737157694478413704L;
// Yüklenecek dizin
private static final String UPLOAD_DIRECTORY = "assets/images/upload";
// Upload ayarları
private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB
private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB
private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB
private static final String UPLOAD_SUCCESS = "Dosya Yüklendi";
private static final String NO_FILE = "Lütfen Resim Seçin";
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/plain");
resp.setCharacterEncoding("UTF-8");
PrintWriter out = resp.getWriter();
if(!ServletFileUpload.isMultipartContent(req)) {
out.print("enctype = multipart/form-data olmalıdır.");
out.flush();
return;
}
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(MEMORY_THRESHOLD);
File repository = new File(System.getProperty("java.io.tmpdir"));
System.out.println(repository.getAbsolutePath());
factory.setRepository(repository);
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setFileSizeMax(MAX_FILE_SIZE);
upload.setSizeMax(MAX_REQUEST_SIZE);
String uploadPath = getServletContext().getRealPath("")
+ File.separator + UPLOAD_DIRECTORY;
System.out.println(uploadPath);
try {
List<FileItem> images = upload.parseRequest(req);
if (images != null && images.size() > 0) {
for (FileItem image : images) {
if (!image.isFormField()) {
String fileName = new File(image.getName()).getName() + System.currentTimeMillis();
String filePath = uploadPath + File.separator + fileName;
File storeFile = new File(filePath);
//Dosyayı Kaydet
image.write(storeFile);
out.print(UPLOAD_SUCCESS);
}
else out.print("Form elemanı değil");
}
} else out.print(NO_FILE);
} catch (Exception e) {
out.print("Exeption");
e.printStackTrace();
}
}
}
GRUP RESMİ
$（文档）.ready（函数（）{
$（'#uploadImage'）。单击（函数（）{
var form=$（'#uploadform'）；
表单提交（）；
表单提交（函数（）{
$.ajax({
键入：“Post”，
url:“UploadImage”，
数据：form.serialize（），
enctype:“多部分/表单数据”，
成功：功能（结果）{
$（'#uploadResult'）.html（结果）；
}
});
});
});
});
曼哈顿现场表演
标签{颜色：白色！重要}
格鲁普阿迪酒店
是的
埃克伦·耶勒
哈夫塔勒克格鲁普酒店
哈金
函数addMember（）{
var opt=document.createElement（“选项”）；
opt.text=document.getElementById（“成员”）.value；
opt.value=document.getElementById（“成员”）.value；
var select=document.getElementById（“成员列表”）；
选择.appendChild（opt）；
}
函数deleteMember（）{
var select=document.getElementById（“成员列表”）；
选择。删除（选择。选择索引）；
}
公共类UploadImageController扩展HttpServlet{
/**
*
*/
私有静态最终长SerialVersionId=673715769478413704L；
//尤克勒内切克·迪津
私有静态最终字符串上传\ u DIRECTORY=“资产/图像/上传”；
//上传ayarları
私有静态最终整数内存\u阈值=1024*1024*3；//3MB
私有静态最终int MAX_FILE_SIZE=1024*1024*40；//40MB
私有静态final int MAX_REQUEST_SIZE=1024*1024*50；//50MB
私有静态最终字符串上传_SUCCESS=“Dosya Yüklendi”；
私有静态最终字符串NO_FILE=“Lütfen Resim Seçin”；
@凌驾
受保护的void doPost（HttpServletRequest-req，HttpServletResponse-resp）引发ServletException，IOException{
分别为setContentType（“文本/普通”）；
分别为setCharacterEncoding（“UTF-8”）；
PrintWriter out=resp.getWriter（）；
如果（！ServletFileUpload.isMultipartContent（请求））{
打印（“enctype=多部分/表格数据olmalıdır.”）；
out.flush（）；
返回；
}
DiskFileItemFactory=新的DiskFileItemFactory（）；
设置SizeThreshold（内存_阈值）；
文件存储库=新文件（System.getProperty（“java.io.tmpdir”）；
System.out.println（repository.getAbsolutePath（））；
setRepository（repository）；
ServletFileUpload upload=新的ServletFileUpload（工厂）；
upload.setFileSizeMax（最大文件大小）；
upload.setSizeMax（最大请求大小）；
字符串uploadPath=getServletContext（）.getRealPath（“”）
+File.separator+上传目录；
System.out.println（上传路径）；
试一试{
列表图像=upload.parseRequest（req）；
if（images！=null&&images.size（）>0）{
用于（文件项图像：图像）{
如果（！image.isFormField（））{
字符串文件名=新文件（image.getName（））.getName（）+System.currentTimeMillis（）；
字符串filePath=uploadPath+File.separator+fileName；
文件存储文件=新文件（文件路径）；
//多斯耶·凯代特
image.write（存储文件）；
打印输出（上传成功）；
}
else out.print（“elemanıdeğil表格”）；
}
}else out.打印（无文件）；
}捕获（例外e）{
打印（“例外”）；
e、 printStackTrace（）；
}
}
}
$(document).ready(function(){
$('#uploadImage').click(function(){
var form = $('#uploadform');
$.ajax({
type: 'Post',
url: 'UploadImage',
data: form.serialize(),
enctype: 'multipart/form-data',
success: function(result) {
$('#uploadResult').html(result);
}
});
});
});
什么也没发生