js分割文件快速上传

<?php header(‘Content-type:text/html;charset=UTF-8‘); ?>

<?php
if ($_FILES) {

  if(!file_exists(‘./uploads/123.zip‘)) {
    move_uploaded_file($_FILES[‘part‘][‘tmp_name‘],‘./uploads/123.zip‘);
  } else {
    file_put_contents(‘./uploads/123.zip‘,file_get_contents($_FILES[‘part‘][‘tmp_name‘]),FILE_APPEND);
    unlink($_FILES[‘part‘][‘tmp_name‘]);
  }

  echo ‘ok‘;
  exit;
}
?>

<h1>html5大文件切割上传</h1>
<div id="bar" style="">
    <span id="progress">0%</span>
</div>

<input name="mov" type="file" />
<input id="btn" type="button" value="点我" />

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(‘#btn‘).click(function() {
            sendfile();
        });
    })

     function sendfile() {
         const LENGTH = 1024 * 1024;
         var sta = 0;
         var end = sta + LENGTH;
         var blob = null;
         var fd = null;

         /*
             xhr 对象
         */
         var xhr = null;

         var mov = document.getElementsByName(‘mov‘)[0].files[0];
         //console.log(mov);return;

         var totalsize = mov.size;
         var percent = 0;

         // while(sta < totalsize) {
         timer = setInterval(function(){
            if (sta>totalsize) {
                clearInterval(timer);
            };
            blob = mov.slice(sta,end);
             fd = new FormData();
             fd.append(‘part‘,blob);

             xhr = new XMLHttpRequest();
             xhr.open(‘POST‘,"",false);

             xhr.send(fd);

             sta = end;
             end = sta + LENGTH; 

             percent = 100 * end / totalsize;
             if(percent > 100) {
                 percent = 100;
             }
             // document.getElementById(‘bar‘).style.width = percent + ‘%‘;
            // $(‘#bar‘).width(percent+‘%‘);
             $(‘#bar‘).css({‘width‘:percent+‘%‘, ‘background-color‘:‘red‘});
             $(‘#progress‘).html(parseInt(percent)+‘%‘);
         },1)

         // }

     }

</script>

  

时间: 2024-08-05 05:11:33

js分割文件快速上传的相关文章

使用AjaxFileUpload.js实现文件异步上传

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"

C# 用原生JS进行文件的上传

1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&quo

Ext.js多文件选择上传,

工作了之后来到了一家用Ext.js的公司, 一开始的时候做项目, 我被分给一个做一个单表的增删改查, 再加上文件上传功能, 带我的老师让我自己研究一下Ext.js怎么多文件选择上传, 并且能获取到上传文件的name和各项属性, 一开始反正很头疼, 后来知道这个东西其实后来也是把代码换成了html标签, 上传文件的标签是<input type="file" />, 无奈后来怎么搞也无法传给后台的servlet, 后来在input标签上加上了一个name属性, 便可以正常运行了

文件快速上传和下载原理

<1>Remote端(服务器端)数据的处理没必要去实现这个算法.直接调用库就可以了.chunk一块一块的数据块1. 将Remote端(服务器端)的数据按照Chunck进行切分2. 计算每一个chunk的弱校验和(Adler-32算法)与强校验和(MD5算法)3. 保存进Map中,key为弱校验ID,value为chunk链表 Map> <2>Local 端处理(本地端)1. 读取一个Chunck  判断数据是否够一个chunck大小2. 根据读取到的Chunk 去Remote

asp.net 基于ajaxfileupload.js 实现文件异步上传

前台代码: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("").css("color", "#535353"); $("#_userImgPath").val(""); var str = $("#file").val(); if ($.trim(str) == "") { $(".c

SNF快速开发平台3.0之--文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)

实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制,客户端无刷新 可以对已经上传的附件进行名字变更,改成更友好的名称. 可以对已经上传的文件进行删除. 并记录文件大小,上传人.时间和修改人和时间等. 可以下载附件到本地电脑. 文件的在线预览,支持不安装office软件就可以预览(不管是图片还是office文档都得支持预览) 虽然比专业的图文档管理系统

js文件夹上传

文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹.今天研究了一下这个问题,在此记录. 先说两个问题: 是否所有后端框架都支持文件夹上传? 是否所有浏览器都支持文件夹上传? 第一个问题:YES,第二个问题:NO 只要后端框架对于表单的支持是完整的,那么必然支持文件夹上传.至于浏览器,截至目前,只有 Chrome 支持. 如果需要其它的浏览器支持则需要

js兼容ie获取上传excel文件名称以及大小,绝对路径

/**  *   * @param obj file对象 document.getElementById(elementId);  * @returns  */ function getExcelFileFullPath(obj){ if (obj){ // ie if (window.navigator.userAgent.indexOf("MSIE") >= 1){ obj.select(); return document.selection.createRange().t

不带插件 ,自己写js,实现批量上传文件及进度显示

今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的.然后自己查阅各种资料,经过自己总结,最终完成了这个功能. 如果大家有什么问题可以提出来,一起交流,学习.有什么不对的地方也指出来,我也虚心学习.自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家. 条件:我采用struts2,java ,ajax,FormData实现; 1.实现的逻辑