简单总结下

#ajax上传文件

var xmlhttp = new XMLHttpRequest();

xmlhttp.open("POST", "2.php", false);

var formData = new FormData();

var f = button.form;

var file = f['file']['files'][0];

formData.append('abc', data, "xxx.txt");

xmlhttp.send(formData);

$.ajax({

url:"2.php",

type:'POST',

data:formData,

processData: false,

contentType: false,

success:function(result){

}});

#服务端很简单:

$tmp_name = $_FILES["abc"]["tmp_name"];

$target = "end.txt";

if(is_file($target)){

$target_old = $target;

$target="tmp.txt";

}

move_uploaded_file($tmp_name, $target);

#html:

#angular

$http({

method: 'POST',

url: '2.php',

headers: {

'Content-Type': undefined

},

data: {

email: 'aaaa@aaa.com',

token: 'bbbbasdfasdfasdf',

abc: $scope.filesplitdata

},

transformRequest: function (data, headersGetter) {

var formData = new FormData();

angular.forEach(data, function (value, key) {

formData.append(key, value);

});

var headers = headersGetter();

delete headers['Content-Type'];

return formData;

}

}).success(function (data) {

//alert(data);

}).error(function (data, status) {

});

#接下来是分片上传

#ajax分片上传

var fileSplitSize = 1024 * 1024; //1024 = 1kb 1024*1024 =1Mb

var start = 0, end = 0;

var i = 0;

// 文件段上传

function chunk_upload(button) {

var xmlhttp = new XMLHttpRequest();

var formData = new FormData();

xmlhttp.open("POST", "2.php", false);

var f = button.form;

var file = f['file']['files'][0];

var size = file.size;

end = start + fileSplitSize;

if (end > size) {

i = -1;

end = size;

} else {

i += 1;

end = end;

}  //按大小切割文件段

var data = file.slice(start, end);

var r = new FileReader();

r.readAsBinaryString(data);

$(r).load(function (e) {

var bolb = e.target.result;

//var check = CryptoJS.MD5(bolb).toString();

formData.append('abc', data, "xxx.txt");

xmlhttp.send(formData);

if (xmlhttp.status == 200) {

if (end == size) {

var backtext = xmlhttp.responseText;

alert(backtext);

} else {

//alert("上传完成第" + i + "段");

start = end;

chunk_upload(button);

}

} else {

alert("上传错误");

//chunk_upload(button);

}

});

}

#jquery 分片上传

var fileSplitSize = 1024 * 1024 *10 ;

var start = 0, end = 0;

var i = 0;

// 文件段上传

function chunk_upload(button) {

var formData = new FormData();

var f = button.form;

var file = f['file']['files'][0];

var size = file.size;

end = start + fileSplitSize;

if (end > size) {

i = -1;

end = size;

} else {

i += 1;

end = end;

}  //按大小切割文件段

var data = file.slice(start, end);

var r = new FileReader();

r.readAsBinaryString(data);

$(r).load(function (e) {

var bolb = e.target.result;

//var check = CryptoJS.MD5(bolb).toString();

formData.append('abc', data, "xxx.txt");

$.ajax({

url:"2.php",

type:'POST',

data:formData,

processData: false,

contentType: false,

success:function(result){

if (end == size) {

alert('good');

} else {

//alert("上传完成第" + i + "段");

start = end;

chunk_upload(button);

}

}});

});

}

#angularjs分片上传

(function () {

'use strict';

angular

.module('test', [

])

.directive('file', function () {

return {

scope: {

file: '='

},

link: function (scope, el, attrs) {

el.bind('change', function (event) {

var file = event.target.files[0];

scope.file = file ? file : undefined;

scope.$apply();

});

}

};

})

.controller('testctl',['$scope','$http',function ($scope,$http) {

$scope.uptest = function (currentpage) {

var persize=1024;

var allpage = Math.ceil($scope.file.size/persize);

if(typeof currentpage === "undefined"){

currentpage=1;

}

var start = (currentpage-1)*persize;

var end = start+persize;

if(currentpage===allpage){

end=$scope.file.size;

}

$scope.filesplitdata = $scope.file.slice(start, end);

currentpage=currentpage+1;

$http({

method: 'POST',

url: '2.php',

headers: {

'Content-Type': undefined

},

data: {

email: 'aaaa@aaa.com',

token: 'bbbbasdfasdfasdf',

abc: $scope.filesplitdata

},

transformRequest: function (data, headersGetter) {

var formData = new FormData();

angular.forEach(data, function (value, key) {

formData.append(key, value);

});

var headers = headersGetter();

delete headers['Content-Type'];

return formData;

}

}).success(function (data) {

if(currentpage>allpage){

alert("gooood");

}else{

$scope.uptest(currentpage);

}

//alert(data);

}).error(function (data, status) {

});

};

}]);

}());

#angularjs对应html

Title

angular文件上传php,ajax jquery angular 上传文件与分隔上传相关推荐

  1. idea html ajax,在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值

    在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值0 brnm12942014.08.17浏览115次分享举报 public class AjaxServle ...

  2. ajax需要引用什么js文件吗,如何在ajax调用中包含js文件?

    嘿,我找到了添加它的方法.... :) 注意 - 这是一个同步过程,所以你不必担心脚本是否加载....脚本将始终加载实例你调用该函数,你可以立即开始使用加载的脚本.. 让我们使用这两个功能 1)第一个 ...

  3. 10个强大的Ajax jQuery文件上传程序

    上传文件和图片是许多网站的一个常用功能,无论是让注册用户上传一个个人资料图片还是上传文件共享,都离不开上传程序,虽然有很多种实现方法,但要让上传看起来更酷一点,如显示剩余时间,同时上传多个文件,以及使 ...

  4. ajax ashx 请选择文件,ajax+jquery+ashx如何实现上传文件

    ajax+jquery+ashx如何实现上传文件 第一:建立Default.aspx页面 ajax图片上传 function upload(){ var path = document.getElem ...

  5. html5支持ajax和jQuery吗,使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery)...

    使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery) 诚然,Stack Overflow上有类似的问题,但似乎并 ...

  6. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  7. gitee最多上传多大文件_H5移动端图片压缩上传,基于Jquery的前端,实现拍照上传,选择相册

    下载文件 首先前往 https://gitee.com/cp.net/html5-make-upload-thumb 下载所需文件.注:如果你安装git,那么可以直接在你本地 git clone ht ...

  8. ajax图片上传(asp.net +jquery+ashx)

    一.建立Default.aspx页面 [csharp] view plaincopy <%@ Page Language="C#" AutoEventWireup=" ...

  9. php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件

    注:本地预览无效,需要在服务断运行 使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...

最新文章

  1. 本地Windows 7/8上搭建IIS服务器
  2. 汤森路透为何一定要卖掉SCI?
  3. 关于ES、PES、PS以及TS码流
  4. QT计算器功能的实现
  5. linux脚本读取输入信息,LinuxCommandLinex -- [ 脚本 - 读取输入]
  6. 钉钉提示请勿通过开发者调试模式_钉钉开放平台demo调试异常问题解决:hostname in certificate didn't match...
  7. 如何在 Visual Studio 2019 中连接中国版 Azure
  8. Tomcat 的目录结构
  9. Scribe应用实例
  10. new 结构体指针_Go:我应该用指针替代结构体的副本吗?
  11. wordpress+lnmp出现 404 Not Found nginx
  12. 微软IT规划方法论解读
  13. Linux学习总结(77)—— Shell 开发运维经验总结
  14. Fiddler软件基本配置教程
  15. 搭建Yum服务器及编译安装Httpd实验
  16. 数据同步一致性_微服务架构:利用事件驱动实现最终一致性
  17. 值得收藏的网站----安全
  18. 0723电话面试整理
  19. 浏览器字体和html字体,如何正确设置兼容浏览器的中文字体
  20. 我的世界服务器修改id指令,我的世界指令怎么用,我的世界附魔指令id

热门文章

  1. 2006北京最佳小吃店大排行
  2. 全国首例区块链公证书亮相,背后公司深安科技已获数千万元天使融资...
  3. 分享住宿“大混战”:Airbnb、途家、携程、美团、Priceline,这些旅行巨头都来了
  4. 《〈XNova/OGame〉源码笔记》(1-2)
  5. ExpandableList三级扩展
  6. 最近最火的《大秦赋》,用Python抓取相关数据,发现了秘密
  7. C语言第11次有道巴巴,C语言上机指导(第11次实验)(附答案).doc
  8. [GAMES104] Lecture 02 Layered Architecture of Game Engine
  9. IPhone开发教程 一
  10. 利用R,G,B三通道对图像分别生成mask并叠加,最终得到背景和书两种区域