js上传文件不用html5 js http上传文件

如何通过js完成多个文件的上传

HTML5 file组件的新属性

accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。

multiple：是否允许选择多个文件

HTML5 页面代码修改后

img width="400" height="250"/br /

input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/

input type="button" value="上传图片" onclick="uploadFile()" /br /

div id="parent"

div id="son"/div

/div

accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。

如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码

function printFileInfo(){

var picFile = document.getElementById("pic");

var files = picFile.files;

for(var i=0; ifiles.length; i++){

var file = files[i];

var div = document.createElement("div")

div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +

" , 文件类型："+ file.type +" , 文件大小:"+ file.size

document.body.appendChild( div)

}

}

既然可以循环多文件的话，就可以尝试多文件上传了。

1、首先创建 XMLHttpRequest 对象

//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的

var xhr = new XMLHttpRequest()

2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件

error：在请求发生错误时触发。

对应上传时发生错误导致的上传失败：uploadFailed()

//上传失败

function uploadFailed(evt) {

alert("上传失败");

}

progress：在接收相应期间持续不断触发。

对应上传进度方法：onprogress()

/**

* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次

*/

function onprogress(evt){

var loaded = evt.loaded; //已经上传大小情况

var tot = evt.total; //附件总大小

var per = Math.floor(100*loaded/tot); //已经上传的百分比

$("#son").html( per +"%" );

$("#son").css("width" , per +"%");

}

最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。

//上传文件

function uploadFile() {

//将上传的多个文件放入formData中

var picFileList = $("#pic").get(0).files;

var formData = new FormData();

for(var i=0; i picFileList.length; i++){

formData.append("file" , picFileList[i] );

}

//监听事件

xhr.upload.addEventListener("progress", onprogress, false);

xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数

xhr.open("POST", "upload");

//记得加入上传数据formData

xhr.send(formData);

}

相关问答

Q1: js 大文件分片上传处理如何实现？

推荐采用webuploader控件来解决。

关于WebUploader的功能说明：

大文件上传续传

支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。

开源

提供ASP.NET,JSP,PHP示例和源代码，其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。

分片、并发

分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。

当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

预览、压缩

支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。

解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。

多途径添加文件

支持文件多选，类型过滤，拖拽(文件文件夹)，图片粘贴功能。上传本地指定路径的文件，不需要通过点击按钮选择文件。

粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。

HTML5 FLASH

兼容主流浏览器和低版本浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。而且支持IE6，IE8浏览器。

同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。

基于内存映射模式进行IO操作，充分发挥操作系统性能。

MD5秒传

当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。

如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。

易扩展、可拆分

采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。

采用AMD规范组织代码，清晰明了，方便高级玩家扩展。

Q2: 使用js向服务器上传文件

（1）js无法向网站服务器传送文件只能用FTP传送文件，（2）是动态网站要用js代码函数与服务器数据库代码建立连接函数。对应数据库，数据，相应单位，通过指定路径传输倒是制定数据单位。例如照片imag数据单位格式标注照片。通过编辑代码任意网络客户端都可上传到数据库imag格式单位标注中.相片.

Q3: 不使用HTML5，JS怎样上传文件

不写标签让用户选择文件，用户要在那里找选择上传文件的入口？

JS上传文件很多，某度搜索“JS上传文件示例”就很多了。

例如我自己之前写的：

Q4: 关于js上传多个附件问题

js是无法多文件上传的（没有用到HTML5）的情况下，如果还需要实现，需要结合flash.单纯的js实现不了，可以推荐你使用 uploadify 百度一下你就知道怎么用

Q5: 关于javascript文件上传问题

所有ajax上传功能都是访问服务器获取上传进度信息的，比如访问某一个查询接口，服务器在上传以后会定时更新这个数值，javascript在前台通过一个访问路径查询

js上传文件不用html5的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js http上传文件、js上传文件不用html5的信息别忘了在本站进行查找喔。