HTML5连续上传图片
/*
by 的雨
time:2016/11/17
*/
function update_object()
{
//这是在实例化的时候,同时调用int方法
this.int.apply(this,arguments);
}
//这是原型链 == 一个对象
update_object.prototype={
int:function(options)
{
//这是接收从调用的时候传过来参数
this.CC=options.CC;
this.tishi=options.tishi;
this.BB=options.BB;
this.show=options.show;
this.myfile=options.myfile;
this.array=[];
var that=this;
this.btn=options.btn;
this.myfile.onchange=function() //input发生改变的时候触发(onchange事件)
{
//第一步骤,这个步骤是找到file,即上传的文件
var files = this.files;
/*
concat() 方法用于连接两个或多个数组。 把that.filter(files)添加到that.array,这样that.array就会不断的保存file数组
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
*/
that.array=that.array.concat(that.filter(files));
that.Index();
return this;
}
//这是点击上传的步骤
this.btn.onclick=function(e)
{
that.array;
var e=e||event;
e.preventDefault();
//点击的同时调用上传的方法
that.upload();
}
},
//第二步骤,这是过滤file的步骤,这一步在concat之前就调用
filter: function(files) {
var arrFiles=[];
for (var i = 0, file; file = files[i]; i++) {
if (file.type.indexOf("p_w_picpath") == 0) {
//if (file.size >= 512000) {
//// alert('您这张"'+ file.name +'"图片大小过大,应小于500k');
//} else {
arrFiles.push(file);
//}
} else {
alert('文件"' + file.name + '"不是图片。');
}
}
return arrFiles ;
},
//第三步骤,这是为每个file添加索引,在concat连接之后调用,把之前的this.array的内容改变了
Index: function() {
for (var i = 0, file; file = this.array[i]; i++) {
//增加唯一索引值
file.index = i;
}
//这里的this.array已经有索引
this.onSelect(this.array);
return this;
},
//第四步骤,是生成img预览和删除预览
onSelect: function(files) {
var that=this;
var html = '', i = 0;
//动态创建img和li
var show1 = function()
{
file = files[i];
if (file){
//var reader = new FileReader()
var URL=window.URL.createObjectURL(file)
//reader.onload = function(e)
//{
html+='上传成功
这是调用的

创新互联一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!为您提供成都网站制作、成都网站设计、成都网页设计、微信小程序开发、成都网站开发、成都网站制作、成都软件开发、成都app开发是成都本地专业的网站建设和网站设计公司,等你一起来见证!
个人是新手,所以写的代码不规范,还请多多包涵。我也是在网上找了很久,找不到全是纯JavaScript写的,所以想把这篇,让新手学习。
网站题目:HTML5连续上传图片
本文来源:https://qixunwd.cn/article/jopjhp.html
其他资讯
- OpenLDAPMaster-Slave同步复制-创新互联
- Mysql8.0.18如何属性源码编译安装和gcc-9.2.0升级-创新互联
- 什么是二级域名?二级域名好吗?怎么做好二级域名优化工作?
- web网页与小程序间如何进行通信
- 怎么解决Androidstudio3.6安装后gradleDownload失败的问题
- BeeGFS开发环境搭建中如何安装和配置MPICH和MDTEST
- vb.net数组升序排列,对数组进行升序排序的函数
- 路由器设置显示网络异常怎么办呀?windows7公用网络模式无法修改
- 怎么使用UbuntuCleaner为Ubuntu/LinuxMint释放空间
- 100G高防电信线路机房租用在送50M带宽?(机房1g带宽多少钱)
