/**
* 自定义文件上传工具 v1.1
* @param url 路径
*/
function fileUploader(url) {
var _date = new Date(); //日期 this._container_ = null;
this._file_ = null; this._init_1 = function (_uploader) {
return function () {
//生成文件上传控件
var _file = document.createElement("input");
_file.setAttribute("type", "file");
_file.setAttribute("name", "file_" + _date.getTime());
_file.setAttribute("id", "file_" + _date.getTime());
_file.setAttribute("multiple", "multiple"); //生成容器
var _container = document.createElement("div");
_container.setAttribute("id", "div_" + _date.getTime());
_container.appendChild(_file); //添加事件响应,这种方法很独特
_file.addEventListener("change", function (_uploader) {
return function () {
_ajax(_uploader);
}
}(_uploader)); //将对象传出
_uploader._file_ = _file;
_uploader._container_ = _container; //初始状态
_uploader._file_.style.display = "block"; return _container;
}
}(this); /**
* 异步传输文件
* @param _uoloader 文件上传器
* @private
*/
function _ajax(_uploader) {
var _files = _uploader._file_.files;
//检查文件是否为空
if(_files.length == 0){
alert("请先选择文件!");
return;
} /*for(var i=0;i<_files.length;i++){
console.log(_files[i].name);
}*/ //循环上传文件
for(var i=0; i<_files.length; i++){
var _file = _files[i]; //创建xhr对象
var xhr = new XMLHttpRequest();
var _formData = new FormData();
_formData.append("file", _file); //生成上传进度条
var _progress = document.createElement("progress");
_progress.setAttribute("max", "100");
//生成文字标签
var _label = document.createElement("label");
_label.innerHTML = "正在上传"
//创建容器,并将进度条和标签添加到容器中
var _div = document.createElement("div");
_div.appendChild(_progress);
_div.appendChild(_label);
_div.style.display = "none"; //隐藏容器 _uploader._container_.appendChild(_div); //将容器添加到页面中 //状态变化相应处理
xhr.onreadystatechange = function (_div,_xhr) {
return function () {
//如果正准备上传
if(_xhr.readyState == 1){
_div.style.display = "block";
}
//如果上传完成
else if(_xhr.readyState == 4 && _xhr.status == 200){
_div.getElementsByTagName("label")[0].innerHTML = _xhr.responseText;
}
}
}(_div,xhr);
//上传进度处理
xhr.upload.onprogress = function (_pg) {
return function (event) {
var percentCompleted = Math.round(event.loaded * 100 / event.total);//计算上传百分比
_pg.setAttribute("value", percentCompleted); //显示在进度条上
}
}(_progress); xhr.open("POST", url, true); //打开连接
xhr.send(_formData); //发生文件
}
}
}

项目三、文件上传器v1.1的更多相关文章

  1. HTML5文件上传器,纯脚本无插件的客户端文件上传器---Uploader 文件上传器类

    概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...

  2. SpringBoot项目实现文件上传和邮件发送

    前言 本篇文章主要介绍的是SpringBoot项目实现文件上传和邮件发送的功能. SpringBoot 文件上传 说明:如果想直接获取工程那么可以直接跳到底部,通过链接下载工程代码. 开发准备 环境要 ...

  3. JavaWeb项目实现文件上传动态显示进度

    很久没有更新博客了,这段时间实在的忙的不可开交,项目马上就要上线了,要修补的东西太多了.当我在学习JavaWeb文件上传的时候,我就一直有一个疑问,网站上那些博客的图片是怎么上传的,因为当提交了表单之 ...

  4. jsp---》》》新闻发布系统的项目跟踪+++++++文件上传

    先来一个分层架构图: WeebRoot目录下的页面: 现在,此项目以实现登录,注销,新闻列表,编辑主题>>>> 先来登录部分的关键代码 index.jsp中的代码 userIn ...

  5. web项目的文件上传和 下载

    文件上传和下载在web应用中非常普遍,要在jsp环境中实现文件上传功能是非常容易的,因为网上有许多用Java开发的文件上传组件,本文以commons-fileupload组件为例,为jsp应用添加文件 ...

  6. jQuery插件之路(三)——文件上传(支持拖拽上传)

    好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下, ...

  7. VUE项目中文件上传兼容IE9

    项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...

  8. web自动化之selenium(三)文件上传

    1.上传标签为input #若上传文件的标签为<input>可以直接定位标签,然后send_keys(文件路径)可以直接上传 2.利用第三方软件Autoit上传 1.下载Autoit:ht ...

  9. qxx项目大文件上传

    1. 在做大文件上传的时候,要注意修改文件的配置,php.ini的配置,还有连接时间.这些东西都记不清了,明天需要问一下芳哥,然后遇到问题的时候就能自己解决了. 2. 然后就遇到一个很尴尬的问题:大文 ...

随机推荐

  1. day 15 模块 相对导入

    自定义模块: 什么是模块:本质就是.py文件,封装语句的最小单位. 自定义模块:实际上就是定义.py,其中可以包含:变量定义,可执行语句,for循环,函数定义等等,他们统称模块的成员. 模块的运行方式 ...

  2. 剑指offer-递归和循环-python

    -斐波那契数列- 大家都知道斐波那契数列(1.1.2.3.5.8.13.21.34.……),现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 斐波那契数 ...

  3. visual studio git 忽略文件配置模板

    ## Ignore Visual Studio temporary files, build results, and## files generated by popular Visual Stud ...

  4. java实现spark常用算子之cartesian

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  5. 从零开始学MySQL(三)

    经过上两节的洗礼,我们能够连接上服务器,并成功地进入与mysql交互的会话中了.那么现在就可以发起SQL语句,让服务器来执行它了!这听起来很酷吧?接下来,我们开始学习MySQL的相关知识. 本文概览: ...

  6. 【转载】平时的你VS面试的你

    https://www.cnblogs.com/rjzheng/p/10275453.html 引言 大家在面试的时候,特别是最后一面HR面,是不是经常都说自己咳咳咳.博主特意总结了一下平时的你和面试 ...

  7. vi/vim常用命令总结

    vim是vi的升级模式,完全兼容vi 解决vim打开中文乱码问题 编辑/etc/vim/vimrc配置文件,添加下面的内容: ''' set fileencodings=utf-8,ucs-bom,g ...

  8. AIX查看系统日志

    1.查看系统启动日志 在AIX中可以使用alog命令来查看系统日志.   启动日志: /var/adm/ras/bootlog /var/adm/ras/bosinstlog /var/adm/ras ...

  9. keepalived启动后报错:(VI_1): received an invalid passwd!的解决办法

    一.配置好keepalived.conf文件后,启动keepalived,查看/var/log/message日志报错: [root@push-- sbin]# tail -f /var/log/me ...

  10. dataTable 、dataView、Dataset 区别

    dataTable .dataView.Dataset 区别的经典回答 1.DataView是DataTable的表示,DataTable表里的记录是没有顺序的,但显示可以有不同顺序(DataVIew ...