使用html5上传器上传大文件

时间:2013-11-27 18:31:52

标签: html5 upload wamp

我的问题是我需要上传大视频文件,但不是那么大。像100~500mb。 70mb的视频我可以做到。当我尝试上传大文件时,firefox崩溃并关闭。铬也是如此。我正在使用html5uploader.js。

  

/ *   *使用HTML将文件上传到服务器5将文件夹拖放到本地计算机上   *测试:Mozilla Firefox 3.6.12,谷歌Chrome 7.0.517.41,Safari 5.0.2,WebKit r70732   *当前版本无效:Opera 10.63,Opera 11 alpha,IE 6+。   * /

function uploader(place,status,targetPHP,show){

// Upload image files
upload = function(file) {
      if((file.type == 'image/jpeg' || file.type == 'audio/mpeg' || file.type =='image/png' || file.type == 'image/bmp' || file.type == 'image/gif')){
            alert('Arquivo não permitido.');
            return false;
      }

      // Firefox 3.6, Chrome 6, WebKit
    if(window.FileReader) { 

        // Once the process of reading file
        this.loadEnd = function() {
            bin = reader.result;                
            xhr = new XMLHttpRequest();
            xhr.open('POST', targetPHP+'?up=true', true);
            var boundary = 'xxxxxxxxx';
            var body = '--' + boundary + "\r\n";  

// body + =“Content-Disposition:form-data; name ='upload'; filename ='”+ file.name +“'\ r \ n”;

                body + =“Content-Disposition:form-data; name ='upload'; filename ='”+ encodeURI(file.name)+“'\ r \ n”;                 body + =“Content-Type:”+ file.type +“\ r \ n \ r \ n”;
                body + = bin +“\ r \ n”;
                body + =' - '+ boundary +' - ';
                xhr.setRequestHeader('content-type','multipart / form-data; boundary ='+ boundary);                 // Firefox 3.6提供了一个功能sendAsBinary()                 if(xhr.sendAsBinary!= null){                     xhr.sendAsBinary(主体);                 // Chrome 7发送数据,但您必须在PHP端使用base64_decode                 } else {                     xhr.open('POST',targetPHP +'?up = true& base64 = true',true);                     xhr.setRequestHeader('UP-FILENAME',file.name);                     xhr.setRequestHeader('UP-SIZE',file.size);                     xhr.setRequestHeader('UP-TYPE',file.type);                     xhr.send(window.btoa(BIN));                 }                 if(show){                     var newFile = document.createElement('div');                     tamanho =(((file.size)/ 1024)/ 1024);                     tamanhoMB = tamanho.toFixed(2);                     newFile.innerHTML ='Nome do arquivo:'+ file.name +'| Tamanho:'+ tamanhoMB +'MB';                     的document.getElementById(显示).appendChild(NEWFILE);
                }                 if(status){                     document.getElementById(status).innerHTML ='上传concluído! Arrasteopróximoarquivo。';                 }             };

        // Loading errors
        this.loadError = function(event) {
            switch(event.target.error.code) {
                case event.target.error.NOT_FOUND_ERR:
                    document.getElementById(status).innerHTML = '<h4>Arquivo não encontrado!</h4>';
                break;
                case event.target.error.NOT_READABLE_ERR:
                    document.getElementById(status).innerHTML = '<h4>Arquivo não legível!</h4>';
                break;
                case event.target.error.ABORT_ERR:
                break; 
                default:
                    document.getElementById(status).innerHTML = '<h4>Erro de leitura.</h4>';
            }   
        };

        // Reading Progress
        this.loadProgress = function(event) {
            if (event.lengthComputable) {
                var percentage = Math.round((event.loaded * 100) / event.total);
                document.getElementById(status).innerHTML = '<h4>Carregando... '+percentage+'%</h4>';
            }               
        };

        // Preview images
        this.previewNow = function(event) { 
            bin = preview.result;
            var img = document.createElement("img"); 
            img.className = 'addedIMG';
            img.file = file;   
            img.src = bin;
            document.getElementById(show).appendChild(img);
        };

    reader = new FileReader();
    // Firefox 3.6, WebKit
    if(reader.addEventListener) { 
        reader.addEventListener('loadend', this.loadEnd, false);
        if (status != null) 
        {
            reader.addEventListener('error', this.loadError, false);
            reader.addEventListener('progress', this.loadProgress, false);
        }

    // Chrome 7
    } else { 
        reader.onloadend = this.loadEnd;
        if (status != null) 
        {
            reader.onerror = this.loadError;
            reader.onprogress = this.loadProgress;
        }
    }
    var preview = new FileReader();
    // Firefox 3.6, WebKit
    if(preview.addEventListener) { 
        preview.addEventListener('loadend', this.previewNow, false);
    // Chrome 7 
    } else { 
        preview.onloadend = this.previewNow;
    }

    // The function that starts reading the file as a binary string
    reader.readAsBinaryString(file);

    // Preview uploaded files
    if (show) {
        preview.readAsDataURL(file);
    }

    // Safari 5 does not support FileReader
    } else {
        xhr = new XMLHttpRequest();
        xhr.open('POST', targetPHP+'?up=true', true);
        xhr.setRequestHeader('UP-FILENAME', file.name);
        xhr.setRequestHeader('UP-SIZE', file.size);
        xhr.setRequestHeader('UP-TYPE', file.type);
        xhr.send(file); 

        if (status) {
            document.getElementById(status).innerHTML = '100% carregado';
        }
        if (show) {
            var newFile  = document.createElement('div');
            newFile.innerHTML = file.name+' (Tamanho: '+file.size+' Bytes)';
            document.getElementById(show).appendChild(newFile);
        }   
    }               
};

// Function drop file
this.drop = function(event) {
    event.preventDefault();
    var dt = event.dataTransfer;
    var files = dt.files;
        if (files.length<=2){
            for (var i = 0; i<files.length; i++) {
                var file = files[i];
                upload(file);
            }
        }else{
            alert('Limite de upload excedido! Máximo permitido: dois arquivos.');
        }
};

// The inclusion of the event listeners (DragOver and drop)

this.uploadPlace =  document.getElementById(place);
this.uploadPlace.addEventListener("dragover", function(event) {
    event.stopPropagation(); 
    event.preventDefault();
}, true);
this.uploadPlace.addEventListener("drop", this.drop, false); 

}

我阅读了很多问题和帖子,但有类似的问题,但似乎没有什么工作在这里。我不知道我还能做些什么。我在wamp \ bin \ php \ php5.3.5 \ php.ini,wamp \ bin \ apache \ Apache2.2.17 \ bin \ php.ini和wamp \ bin \ php \ php5.3.5 \ phpForApache上将变量更改为这些值.ini:

upload_max_filesize -> 1024mb, 
post_max_size -> 1024mb, 
max_execution_time -> 600, 
max_input_time -> 600,
memory_limit -> 2048mb.

重新启动wamp,没有工作。在wamp \ bin \ apache \ Apache2.2.17 \ conf \ extra \ httpd-vhosts.conf中,我输入以下内容:

<Directory "D:\wamp\www\projec"> LimitRequestBody 102400 Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory>

也没工作。谁有解决方案或想法救我?我真的很感激。感谢。

0 个答案:

没有答案