EasyUI Forum
June 16, 2024, 02:34:48 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to upload a file with an easyui-filebox  (Read 23835 times)
forum6691
Newbie
*
Posts: 39


View Profile
« on: July 08, 2016, 08:21:55 AM »

Hi
I'd like to upload the file I chose in an easyui-filebox to my server when I click an easyui-linkbutton just beside
I'v included the easyui-filebox and  the easyui-linkbutton in the toolbar of an easyui-datagrid.

Thanks for your help.

Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: July 08, 2016, 06:22:52 PM »

The simplest way to upload a file is to wrap a form and then submit this form.
Code:
<form id="ff" enctype="multipart/form-data" method="post" action="...">
  <input class="easyui-filebox" name="file">
</form>
<script>
function uploadFile(){
  $('#ff').form('submit', {
    //...
  });
}
</script>
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #2 on: July 09, 2016, 04:05:39 AM »

Thank stworthy.
I implemented this code to transmit my file via a form

HTML firstly
Code:
<table>
<tr>
    <td style="width:70%;"> <form id="uploadFile" enctype="multipart/form-data" method="post">
            <input id="chooseFile" class="easyui-filebox" name="file1" data-options="prompt:'Choose a file...'" style="width:25%">
            <a id="btn_add" href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">Add File</a>
        </form></td>
    <td style="width:30%;"><div id="progressFile" class="easyui-progressbar" style="width:100%;"></div></td>
</tr>
</table>

javascript code secondly
Code:
$(document).ready(function(){

    $('#uploadFile').form({
        url:'{PATH_TO_ROOT}/regate/?url=/ajax/tree',
        ajax:'true',
        iframe:'false', // pour activer le onProgress
        onProgress: function(percent){
            // pendant l'envoi du fichier
            $('#progressFile').progressbar('setValue', percent);    
        },
        success: function(data){
                // apres l'envoi du fichier en cas de succes
                alert('succes');
        },
        onLoadError: function(){
                // apres l'envoi du fichier en cas d'erreur
        }
    });


    $('#btn_add').bind('click', function(){
        // vérification si le champ du nom de fichier est vide ou non
        if($('#chooseFile').filebox('getValue')!="") { // transfer le fichier en assynchrone
            $('#uploadFile').submit(); // on envoie le fichier
        }
    });
});

The code is OK, the php file is called, but during the transmit of a file ( even a big file), the onProgress Method is NEVER called.
I've put iframe to false, but it's the same.

Where is my error ?
« Last Edit: July 09, 2016, 04:26:45 AM by forum6691 » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: July 09, 2016, 09:11:43 AM »

The 'iframe' property is a boolean value, it should be set to false not 'false'.
Code:
$('#uploadFile').form({
  iframe: false,
  //...
});
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #4 on: July 09, 2016, 10:39:23 AM »

Thank you VERY MUCH. it's work now.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!