要求：使用html5中file控件實現多文件上傳，如實傳圖片顯示圖片。並且添加進度顯示上傳進度
html+一般處理程序。
<!DOCTYPE html >
<html > <head>
<title>圖片上傳</title>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
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>
<form id="upload" action="fileUpload.ashx" method="post" enctype="multipart/form-data">
<input type="hidden" id="_viewstate" value="-1" />
<div>
<label for="fileselect">
請選擇文件</label>
<input type="file" multiple="mulitple" name="fileselect[]" id="fileToUpload" onchange="fileSelected();" />
</div>
<div id="messages" style="border: 1px red solid">
<p>
文件信息:</p>
</div>
<input type="button" value="上傳" onclick="uploadFile1()" />
</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; }
}
}
----------------------就此貼完，希望能夠用的着此代碼，此功能時能拿來用用--------------------------------------