相关疑难解决方法(0)

将大文件切成块并使用ajax和html5 FileReader上传

我想要实现的是:

在前端,我使用html5文件api来读取文件,然后使用ajax将文件的内容上传到php后端,如果文件大小很小就可以了.但是,如果文件足够大,则会导致chrome崩溃.所以我使用file.slice将大文件拆分成块,当所有块都上传到php时,将块合并为一个完整的块.

代码如下:

前端:

<style>
#container {
     min-width:300px;
     min-height:200px;
     border:3px dashed #000;
}
</style>
<div id='container'>

</div>
<script>
function addDNDListener(obj){
    obj.addEventListener('dragover',function(e){
            e.preventDefault();
            e.stopPropagation();
    },false);
    obj.addEventListener('dragenter',function(e){
            e.preventDefault();
            e.stopPropagation();
    },false);
    obj.addEventListener('drop',function(e){
            e.preventDefault();
            e.stopPropagation();
            var ul = document.createElement("ul");
            var filelist = e.dataTransfer.files;
            for(var i=0;i<filelist.length;i++){
                    var file = filelist[i];
                    var li = document.createElement('li');
                    li.innerHTML = '<label id="'+file.name+'">'+file.name+':</label>  <progress value="0" max="100"></progress>';
                    ul.appendChild(li);
            }
            document.getElementById('container').appendChild(ul);
            for(var i=0;i<filelist.length;i++){
                    var file = filelist[i];
                    uploadFile(file);
            }
    },false);
}

function uploadFile(file){
    var loaded = 0;
    var step = 1024*1024;
    var …
Run Code Online (Sandbox Code Playgroud)

javascript php html5 drag-and-drop filereader

11
推荐指数
2
解决办法
3万
查看次数

标签 统计

drag-and-drop ×1

filereader ×1

html5 ×1

javascript ×1

php ×1