angular文件上传php,ajax jquery angular 上传文件与分隔上传
简单总结下
#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 上传文件与分隔上传相关推荐
- idea html ajax,在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值
在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值0 brnm12942014.08.17浏览115次分享举报 public class AjaxServle ...
- ajax需要引用什么js文件吗,如何在ajax调用中包含js文件?
嘿,我找到了添加它的方法.... :) 注意 - 这是一个同步过程,所以你不必担心脚本是否加载....脚本将始终加载实例你调用该函数,你可以立即开始使用加载的脚本.. 让我们使用这两个功能 1)第一个 ...
- 10个强大的Ajax jQuery文件上传程序
上传文件和图片是许多网站的一个常用功能,无论是让注册用户上传一个个人资料图片还是上传文件共享,都离不开上传程序,虽然有很多种实现方法,但要让上传看起来更酷一点,如显示剩余时间,同时上传多个文件,以及使 ...
- ajax ashx 请选择文件,ajax+jquery+ashx如何实现上传文件
ajax+jquery+ashx如何实现上传文件 第一:建立Default.aspx页面 ajax图片上传 function upload(){ var path = document.getElem ...
- 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上有类似的问题,但似乎并 ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- gitee最多上传多大文件_H5移动端图片压缩上传,基于Jquery的前端,实现拍照上传,选择相册
下载文件 首先前往 https://gitee.com/cp.net/html5-make-upload-thumb 下载所需文件.注:如果你安装git,那么可以直接在你本地 git clone ht ...
- ajax图片上传(asp.net +jquery+ashx)
一.建立Default.aspx页面 [csharp] view plaincopy <%@ Page Language="C#" AutoEventWireup=" ...
- php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件
注:本地预览无效,需要在服务断运行 使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...
最新文章
- 本地Windows 7/8上搭建IIS服务器
- 汤森路透为何一定要卖掉SCI?
- 关于ES、PES、PS以及TS码流
- QT计算器功能的实现
- linux脚本读取输入信息,LinuxCommandLinex -- [ 脚本 - 读取输入]
- 钉钉提示请勿通过开发者调试模式_钉钉开放平台demo调试异常问题解决:hostname in certificate didn't match...
- 如何在 Visual Studio 2019 中连接中国版 Azure
- Tomcat 的目录结构
- Scribe应用实例
- new 结构体指针_Go:我应该用指针替代结构体的副本吗?
- wordpress+lnmp出现 404 Not Found nginx
- 微软IT规划方法论解读
- Linux学习总结(77)—— Shell 开发运维经验总结
- Fiddler软件基本配置教程
- 搭建Yum服务器及编译安装Httpd实验
- 数据同步一致性_微服务架构:利用事件驱动实现最终一致性
- 值得收藏的网站----安全
- 0723电话面试整理
- 浏览器字体和html字体,如何正确设置兼容浏览器的中文字体
- 我的世界服务器修改id指令,我的世界指令怎么用,我的世界附魔指令id
热门文章
- 2006北京最佳小吃店大排行
- 全国首例区块链公证书亮相,背后公司深安科技已获数千万元天使融资...
- 分享住宿“大混战”:Airbnb、途家、携程、美团、Priceline,这些旅行巨头都来了
- 《〈XNova/OGame〉源码笔记》(1-2)
- ExpandableList三级扩展
- 最近最火的《大秦赋》,用Python抓取相关数据,发现了秘密
- C语言第11次有道巴巴,C语言上机指导(第11次实验)(附答案).doc
- [GAMES104] Lecture 02 Layered Architecture of Game Engine
- IPhone开发教程 一
- 利用R,G,B三通道对图像分别生成mask并叠加,最终得到背景和书两种区域