1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    5
    Vote Rating
    0
    merovius is on a distinguished road

      0  

    Default Problem with File Upload

    Problem with File Upload


    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by TFM
    File Uploads

    File uploads are not performed using Ajax submission, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM <form> element temporarily modified to have its target set to refer to a dynamically generated, hidden <iframe> which is inserted into the document but removed after the return data has been gathered.

    The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
    http://www.extjs.com/deploy/dev/docs...form.BasicForm

  3. #3
    Ext User
    Join Date
    Mar 2010
    Posts
    5
    Vote Rating
    0
    merovius is on a distinguished road

      0  

    Default


    Problem resolved.

    Thank you !

  4. #4
    Sencha User
    Join Date
    Oct 2008
    Posts
    9
    Vote Rating
    0
    dasnk is on a distinguished road

      0  

    Default


    I don't understand where you set the content type? As far as i can see there is no option for this in .submit() or formpanel, basicform, etc.

  5. #5
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    This is not an ExtJS setting, the content-type header needs to be set on the response by the server.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar