<%@ Page Language="
C#
" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head run at="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//选择图片, c# 默认请求大小4M。
//如果需求需要大于4M，修改httpRuntime下的maxRequestLength
//单位为：K
function fileSelected() {
var files = document.getElementById('fileToUpload').files;
if (files.length > 0) {
var fileInfo = '';
for (var i = 0; i < files.length; i++) {
fileInfo += 'Name: ' + files[i].name + '<br/>';
fileInfo += 'Size: ' + files[i].size + '<br/>';
fileInfo += 'Type: ' + files[i].type + '<br/>';
}
document.getElementById('fileInfo').innerHTML = fileInfo;
}
}
function uploadFile() {//上传图片
var files = document.getElementById('fileToUpload').files;
if (files.length > 0) {
var fd = new FormData();
for (var i = 0; i < files.length; i++) {
fd.append("fileToUpload", files[i]);
}
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", "Upload.ashx?filename=UploadImage");
xhr.send(fd);
} else {
alert('请选择上传的图片！');
}
}
function uploadProgress(evt) {//上传中
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {//上传完成
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {//上传失败
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {//上传被取消
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" οnchange="fileSelected();" />
<input type="button" οnclick="uploadFile()" value="Upload Image" />
<div id="fileInfo"></div>
<div id="progressNumber"></div>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head run at="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//选择图片, c# 默认请求大小4M。
//如果需求需要大于4M，修改httpRuntime下的maxRequestLength
//单位为：K
function fileSelected() {
var files = document.getElementById('fileToUpload').files;
if (files.length > 0) {
var fileInfo = '';
for (var i = 0; i < files.length; i++) {
fileInfo += 'Name: ' + files[i].name + '<br/>';
fileInfo += 'Size: ' + files[i].size + '<br/>';
fileInfo += 'Type: ' + files[i].type + '<br/>';
}
document.getElementById('fileInfo').innerHTML = fileInfo;
}
}
function uploadFile() {//上传图片
var files = document.getElementById('fileToUpload').files;
if (files.length > 0) {
var fd = new FormData();
for (var i = 0; i < files.length; i++) {
fd.append("fileToUpload", files[i]);
}
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", "Upload.ashx?filename=UploadImage");
xhr.send(fd);
} else {
alert('请选择上传的图片！');
}
}
function uploadProgress(evt) {//上传中
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {//上传完成
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {//上传失败
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {//上传被取消
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" οnchange="fileSelected();" />
<input type="button" οnclick="uploadFile()" value="Upload Image" />
<div id="fileInfo"></div>
<div id="progressNumber"></div>
</div>
</form>
</body>
</html>
2043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
