html5多文件上传、带有进度条显示

最新推荐文章于 2022-09-26 14:36:08 发布

ajw9091

最新推荐文章于 2022-09-26 14:36:08 发布

阅读量288

点赞数

文章标签： javascript c# ViewUI

原文链接：http://www.cnblogs.com/yingFly/archive/2012/12/17/html5-file-uploadProgress.html

版权

要求：使用html5中file控件实现多文件上传，如实传图片显示图片。并且添加进度显示上传进度

html+一般处理程序。

<!DOCTYPE html >

function fileSelected() {

//当选择文件时先清空原有的div中，此方法是加载文件信息与进度条问题关键

$("#messages").text("");

a = 0;

//获取文件集合

var file = document.getElementById('fileToUpload').files;

//获取文件各数

var fileNum = document.getElementById("fileToUpload").files.length;

for (var i = 0; i < fileNum; i++) {

//读取图片信息

showMsg(file[i], i);

}

//展示信息

function showMsg(file, i) {

if (file) {

//转化为kb和MB格式。文件的名字、大小、类型都是可以现实出来。

var fileSize = 0;

if (file.size > 1024 * 1024) {

fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';

}

else {

fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

}

//图片上传的是图片还是其他

if (file.type.indexOf("image") == 0) {

//拼接字符串

var msg = "图片名称：" + file.name + "；图片大小：" + file.size + "；图片类型：" + file.type + "<br/><br/>";

//如果是创建filereader对象

var reader = new FileReader();

reader.onload = function (e) {

// e.target.result 的返回结果就是本地图片的路径，同时创建进度条和现实信息

var imgStr = "<img src='" + e.target.result + "' width='200px' height='200'/><progress id='num" + i + "' ></progress><span id='" + i + "'></span><br/>"; $("#messages").append(msg);

$("#messages").append(imgStr);

};

reader.readAsDataURL(file);

}

else {

//如果是文件的

var msg = "文件名称：" + file.name + "；文件大小：" + file.size + "；文件类型：" + file.type + "<br/><progress id='num" + i + "' ></progress><span id='" + i + "'></span><br/><br/>";

$("#messages").append(msg);

}

//全局变量a将是作为加载进度条的id值；

var a = 0;

var fileNum;

var file;

//单文件上传

function uploadFile1(a) {

fileNum = document.getElementById("fileToUpload").files.length;

file = document.getElementById('fileToUpload').files;

//单文件上传显示是没有太大的问题，但是多文件上传就得考虑进度条的显示问了，

//uploadProgress(evt) 事件是XMLHttpRequest Leve 2中新加的内容，可以直接用来

//监听文件上传时文件的详情信息，但是多文件上传总是最后才会触发此事件，并且是

//没有什么规律可言，那么就要处理使没上传一个文件就让他必须触发此事件。

uploadFile(file[0]);

}

//多文件上传的独立方法

function uploadFile(file) {

//创建FormData()对象

var fd = new FormData();

fd.append("author", "Shiv Kumar");

fd.append("name", "Html 5 File API/FormData");

//文件对象 file

fd.append("fileToUpload", file);

//准备使用ajax上传

var xhr = new XMLHttpRequest();

//进度条

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

//下载

xhr.addEventListener("load", uploadComplete, false);

//错误信息

xhr.addEventListener("error", uploadFailed, false);

//取消，此功能没有做

xhr.addEventListener("abort", uploadCanceled, false);

//上传

xhr.open("POST", "fileUpload.ashx");

//发送

xhr.send(fd);

}

//进度条显示

function uploadProgress(evt) {

//判断a有没有超出范围

if (a < fileNum && a != fileNum) {

//此处的evt就是文件上传的所有信息。

//evt.lengthComputable,文件是否是空

if (evt.lengthComputable) {

//evt.loaded：文件上传的大小 evt.total：文件总的大小

var percentComplete = Math.round((evt.loaded) * 100 / evt.total);

//加载进度条，同时显示信息

document.getElementById("" + a + "").innerHTML = percentComplete.toString() + '%';

document.getElementById("num" + a + "").value = percentComplete / 100;

//如果上传的结果是100时才让加载下一个文件。如果不够100会继续上传原来的文档。

if (percentComplete == 100) {

a++;

//加载下一个文档

uploadFile(file[a])

}

} else { document.getElementsByName('progressNumber').innerHTML = 'unable to compute'; }

}

function uploadComplete(evt) { }

function uploadFailed(evt) { alert("上传失败."); }

function uploadCanceled(evt) { alert("取消."); }

</script>

</head>

<body>

<div>

请选择文件</label>

</div>

<p>

文件信息:</p>

</div>

</form>

</body>

</html>

---------------html代码贴完------------此代码是测试过的，不过要加载到vs中，还要支持html5多文件上传-------

<%@ WebHandler Language="C#" class="fileUpload" %>

using System;

using System.Web;

public class fileUpload : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

//上传文件

if (context.Request.Files.Count > 0)

{

HttpPostedFile file = context.Request.Files[0];

//判断文件上传的长度是否为0；

if (file.ContentLength > 0)

{

//创建保存路径,获得文件名

string fileName = System.IO.Path.GetFileName(file.FileName);

string path = context.Request.MapPath("temp/" + fileName);

//将上传的文件保存在物理路径

file.SaveAs(path);

}

public bool IsReusable {

get { return false; }

}

----------------------就此贴完，希望能够用的着此代码，此功能时能拿来用用--------------------------------------

转载于:https://www.cnblogs.com/yingFly/archive/2012/12/17/html5-file-uploadProgress.html

ajw9091

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5多文件上传、带有进度条显示

要求：使用html5中file控件实现多文件上传，如实传图片显示图片。并且添加进度显示上传进度html+一般处理程序。<!DOCTYPE html ><html > <head> <title>图片上传</title> <script src="jquery-1.4.1.js" type...
复制链接

扫一扫