[英]How to post ajax call with multipart/form-data?
I need to upload a file from extjs page, via AJAX call, to the server. 我需要通过AJAX调用将文件从extjs页面上传到服务器。 I am able to do it with simple HTML page to servlet but using extjs (v4.0.7) i am not getting file in my servlet when i pars request. 我可以用简单的HTML页面来实现它,但是使用extjs(v4.0.7)我在解析请求时没有在我的servlet中获取文件。 Servlet recognizes multipart page but nothing comes with the call. Servlet识别多部分页面,但呼叫没有任何附件。 Can anyone tell me what I am doing wrong in my code? 谁能告诉我我的代码中出错了什么?
EXTJS code: EXTJS代码:
var fileName = Ext.getCmp("fileName").getValue();
Ext.Ajax.request({
url : 'UploadServlet',
method: 'POST',
headers: {'Content-Type': 'multipart/form-data'},
params :{
'fileName': fileName.trim()
},
success: function ( result, request ) {
resultData = result.responseText;
},
failure: function ( result, request ) {
resultData = result.responseText;
}
});
Servlet code: Servlet代码:
protected void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
.......
// Check that we have a file upload request
isMultipart = ServletFileUpload.isMultipartContent(request);
response.setContentType("text/html");
java.io.PrintWriter out = response.getWriter( );
if( !isMultipart ){
// display no file attached error
return;
}
// Create a factory for disk-based file items
DiskFileItemFactory factory = new DiskFileItemFactory();
// maximum size that will be stored in memory
factory.setSizeThreshold(maxMemSize);
// Location to save data that is larger than maxMemSize.
factory.setRepository(new File(tempDir));
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
// maximum file size to be uploaded.
upload.setSizeMax( maxFileSize );
try{
// Parse the request to get file items.
////// fileItems is empty,
////nothing is comming from extjs page/////////
List<FileItem> fileItems = upload.parseRequest(request);
// Process the uploaded file items
Iterator<FileItem> i = fileItems.iterator();
while ( i.hasNext () ) {
FileItem fi = (FileItem)i.next();
if ( !fi.isFormField () ) {
// Get the uploaded file parameters
String fieldName = fi.getFieldName();
String fileName = fi.getName();
String contentType = fi.getContentType();
boolean isInMemory = fi.isInMemory();
long sizeInBytes = fi.getSize();
// check if file exists
File propFile = new File(tempDir, fileName.substring( fileName.lastIndexOf("\\")));
if (!propFile.exists()) {
// Write the file
if( fileName.lastIndexOf("\\") >= 0 ){
file = new File(tempDir +
fileName.substring( fileName.lastIndexOf("\\"))) ;
}else{
file = new File( tempDir +
fileName.substring(fileName.lastIndexOf("\\")+1)) ;
}
//InputStream uploadedStream = fi.getInputStream();
fi.write( file ) ;
out.println("Uploaded Filename: " + fileName + " is in " + filePath + "<br>");
}
.....
}
}
You can't upload a file with AJAX. 您无法使用AJAX上传文件。
Ext's Ajax
can emulate it though. Ext的Ajax
可以模仿它。 See the doc of the request
method. 请参阅request
方法的文档 。 You have to use the form
and isUpload
options. 您必须使用form
和isUpload
选项。
However, since you have to use a form anyway, you should look at Ext.form.field.Field
(and, as suggested in the doc, to Ext.form.Basic.hasUpload
; that will give you a better understanding of the file upload problematic). 但是,由于您必须使用表单,您应该查看Ext.form.field.Field
(并且,如文档中所建议的那样,使用Ext.form.Basic.hasUpload
;这将使您更好地理解文件上传有问题)。
EDIT: In fact, HTML5 and XMLHttpRequest Level 2 adds support for file upload. 编辑:事实上, HTML5和XMLHttpRequest Level 2增加了对文件上传的支持。 Doesn't change how you have to handle it in Ext, though. 但是,不会改变你在Ext中处理它的方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.