Hi guys,
for a J2EE Web project, I have to add a FileUploadField.
I use the Ext Sample /examples/form/file-upload.html but with some modifications.
The techs used are :
- Tomcat 5.0.18 [Server]
- jakarta-struts-1.1 [to handle my actions]
- Ext 3.2.0
- jdk 1.5.028
Here is my folder organisation :
WebContent
|
|___ META-INF
| |
| |___ MANIFEST.MF
|
|___ WEB-INF
| |
| |___ LIB
| | |__ struts libraries
| |
| |___ struts-config.xml
| |
| |___ web.xml
|
|___ vues
| |
| |___ ext-3.2.0
| | |__ ext stuffs
| |
| |___ icons
| | |__ similar to the folder ext-3.2.0/examples/shared/icons
| |
| |___ js
| | |__ css
| | | |__ fileuploadfield.css
| | |
| | |__ FileUploadField.js
| |
| |___ file-upload.php
| |
| |___ file-upload.js
| |
| |___ main.jsp * replace file-upload.html
Here is the code of main.jsp :
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>File Upload Field Example</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="/TestUpload/vues/ext-3.2.0/resources/css/ext-all.css" />
<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="/TestUpload//vues/js/css/fileuploadfield.css"/>
<style type=text/css>
.upload-icon {
background: url('/TestUpload/vues/icons/fam/image_add.png') no-repeat 0 0 !important;
}
#fi-button-msg {
border: 2px solid #ccc;
padding: 5px 10px;
background: #eee;
margin: 5px;
float: left;
}
</style>
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="/TestUpload/vues/ext-3.2.0/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="/TestUpload/vues/ext-3.2.0/ext-all.js"></script>
<!-- overrides to base library -->
<script type="text/javascript" src="/TestUpload/vues/js/FileUploadField.js"></script>
<!-- page specific -->
<script type="text/javascript" src="/TestUpload/vues/file-upload.js"></script>
</head>
<body>
<h1>File Upload Field</h1>
<p>This example utilizes a custom extension to implement a file upload field.
The js is not minified so it is readable. See <a href="vues/file-upload.js">file-input.js</a> and
<a href="/TestUpload/vues/js/fileuploadfield/FileUploadField.js">FileUploadField.js</a>.</p>
<p>
<b>Basic FileUpload</b><br />
A typical file upload field with Ext style. Direct editing of the text field cannot be done in a
consistent, cross-browser way, so it is always read-only in this implementation.
<div id="fi-basic"></div>
<div id="fi-basic-btn"></div>
</p>
<p>
<b>Basic FileUpload (Button-only)</b><br />
You can also render the file input as a button without the text field, with access to the field's value via the
standard <tt>Ext.form.TextField</tt> interface or by handling the <tt>fileselected</tt> event (as in this example).
<div id="fi-button"></div>
<div id="fi-button-msg" style="display:none;"></div>
<div class="x-clear"></div>
</p>
<p>
<b>Form Example</b><br />
The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
field is required in this example), empty text, etc. This example also demonstrates using the
<tt>buttonCfg</tt> option to provide a customized icon upload button.
<div id="fi-form"></div>
</p>
</body>
</html>
Every url contains "/TestUpload/" which is the context of my application.
==========================
When I want to upload some file with the form, I got some troubles : the waiting bar is running indefinitely.
And with Firebug, I got a syntax error (see attachment 1).
error.jpg
attachment 1
The funny thing is that the request seems to be correctly sent (see attachment 2) and receive correctly the php file
(see attachment 3).
Did you have any idea to fix this problem ?
Thanks,
merovius
post.jpg
attachment 2
response.jpg
attachment 3
PS : sorry for my bad english, I'm french 
Problem with File Upload
Reply With Quote
Originally Posted by TFM
