如何在mootools中处理上传文件?

时间:2011-07-19 21:49:39

标签: php ajax mootools

我已经搜索了这个并且我不能在文件上传中使用ajax,但我需要做的就是通过ajax处理我的文件然后将其传递给我的控制器(我创建的目标和目标文件保存在目录中),所以我怎样才能通过ajax mootols处理上传文件,我已经做到了,并且没有发生,没有插件,我需要有人指导我

这是我的代码

       #f1_upload_process{
           z-index:100;
           position:absolute;
           visibility:hidden;
           text-align:center;
           width:400px;
           margin:0px;
           padding:0px;
           background-color:#fff;
           border:1px solid #ccc;
       }
       </style>



   <p id="f1_upload_process">Loading...<br/></p>

   <p id="result"></p>

    <form method="post" action="" enctype="multipart/form-data">   

        <label for="file">Subir un archivo</label>
        <input type="file" name="file" id="fileArchivo" />
        <input type="submit" name="submit" id="btnSubir" value="upload file" />  

   <iframe name="iframUpload" id="iframeUpload" type="file" style="display:none"></iframe>


        </form>

mootools ajax

window.addEvent("domready",function(){
    cargarIndex();                                
});


function cargarIndex()
{   
   var prueboRequest = new Request({
   method: 'POST', 
   url: '../CONTROLLER/inicio.php',
   onRequest: function() {}, 
   onSuccess: function(texto, xmlrespuesta){
   document.getElementById('subirarchivo').innerHTML= texto;
   $('btnSubir').addEvent('click',function(){beginUploading()});  
   },
   onFailure: function(){alert('Error!');}  
   }).send();


}

function beginUploading(){

   var prueboRequest = new Request({
   method: 'POST', 
   url: '../Controller/ControllerSubirArchivo.php',
   onRequest: function() {}, 
   onSuccess: function(texto, xmlrespuesta){
   onFailure: function(){alert('Error!');}  
   }).send();

我已经搜索了但是我找到的只是这个但是有jquery,我想要类似的东西:

$(function(){
    var btnUpload=$('#upload');
    var status=$('#status');
    new AjaxUpload(btnUpload, {
        action: 'upload-file.php',
        //Name of the file input box
        name: 'uploadfile',
        onSubmit: function(file, ext){
            if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                  // check for valid file extension
                status.text('Only JPG, PNG or GIF files are allowed');
                return false;
            }
            status.text('Uploading...');
        },
        onComplete: function(file, response){
            //On completion clear the status
            status.text('');
            //Add uploaded file to list
            if(response==="success"){
                $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
            } else{
                $('<li></li>').appendTo('#files').text(file).addClass('error');
            }
        }
    });
});

}

1 个答案:

答案 0 :(得分:1)

正如Dimitar Christoff所说,目前还没有办法在没有一点浏览器头痛的情况下上传ajax文件...... 我会推荐plupload项目,所以你确定它是跨浏览器。来自伪造的插件也可以做到这一点但是分离javascript文件上传库这些天是个好主意。考虑到HTML5 API的实现在许多浏览器上仍然是部分的,您可能需要尽快更新脚本......