疾风劲草

我的地盘我说了算

在ASP.NET中实现多文件上传(以及添加节点的问题)(setAttribute())

我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

1、样式问题
setAttribute(class, value)中class是指改变class这个属性,所以要带引号。
  vName代表对样式赋值。
  例如:
  var input = document.createElement(input);
  input.setAttribute(type, text);
  input.setAttribute(name, q);
  input.setAttribute(class,bordercss);
  输出时:,即,input控件具有bordercss样式属性
注意:class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。
使用setAttribute(class, vName)语句动态设置Element的class属性在firefox中是行的通的,但在IE中却不行。因为使用IE内核的浏览器不认识class,要改用className;
同样,firefox 也不认识className。所以常用的方法是二者兼备:

element.setAttribute(class, value);  //for firefox
element.setAttribute(className, value);  //for IE
  
2、方法属性等问题
例如:
var bar = document.getElementById(testbt);
bar.setAttribute(onclick, javascript:alert('This is a test!'););
这里利用setAttribute指定e的onclick属性,简单,很好理解。
但是IE不支持,IE并不是不支持setAttribute这个函数,而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。

为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById(testbt).className = bordercss;
document.getElementById(testbt).style.cssText = color: #00f;;
document.getElementById(testbt).style.color = #00f;
document.getElementById(testbt).onclick= function () { alert(This is a test!); }



在ASP.NET中实现多文件上传


ASPX 代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiFileUpload.aspx.cs"
  Inherits
="MultiFileUpload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  
<title>孟宪会多文件上传测试</title>

  
<script type="text/javascript">
    
function addFile() {
      
var div = document.createElement("div");
      
var f = document.createElement("input");
      f.setAttribute(
"type""file")
      f.setAttribute(
"name""File")
      f.setAttribute(
"size""50")
      div.appendChild(f)
      
var d = document.createElement("input");
      d.setAttribute(
"type""button")
      d.setAttribute(
"onclick""deteFile(this)");
      d.setAttribute(
"value""移除")
      div.appendChild(d)
      document.getElementById(
"_container").appendChild(div);
    }

    
function deteFile(o) {
      
while (o.tagName != "DIV") o = o.parentNode;
      o.parentNode.removeChild(o);
    }
  
</script>

</head>
<body>
  
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
  
<h3>多文件上传</h3>
   用户名:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  
<div id="_container">
    
<input type="file" size="50" name="File" />
  
</div>
  
<div>
    
<input type="button" value="添加文件(Add)" onclick="addFile()" />
  
</div>
  
<div style="padding:10px 0">
    
<asp:Button runat="server" Text="开始上传" ID="UploadButton" 
      onclick
="UploadButton_Click"></asp:Button>
  
</div>
  
<div>
    
<asp:Label ID="strStatus" runat="server" Font-Names="宋体" Font-Bold="True" Font-Size="9pt"
      Width
="500px" BorderStyle="None" BorderColor="White"></asp:Label>
  
</div>
  
</form>
</body>
</html>

C# 代码
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class MultiFileUpload : System.Web.UI.Page
{
    
protected void UploadButton_Click(object sender, EventArgs e)
    {
      
///'遍历File表单元素
      HttpFileCollection files = HttpContext.Current.Request.Files;

      
/// '状态信息
      System.Text.StringBuilder strMsg = new System.Text.StringBuilder("您输入的用户名是:" + TextBox1.Text + "<br/>");
      strMsg.Append(
"上传的文件分别是:<hr color='red'/>");
      
try
      {
        
for (int iFile = 0; iFile < files.Count; iFile++)
        {
          
///'检查文件扩展名字
          HttpPostedFile postedFile = files[iFile];
          
string fileName, fileExtension;
          fileName 
= System.IO.Path.GetFileName(postedFile.FileName);
          
if (fileName != "")
          {
            fileExtension 
= System.IO.Path.GetExtension(fileName);
            strMsg.Append(
"上传的文件类型:" + postedFile.ContentType.ToString() + "<br>");
            strMsg.Append(
"客户端文件地址:" + postedFile.FileName + "<br>");
            strMsg.Append(
"上传文件的文件名:" + fileName + "<br>");
            strMsg.Append(
"上传文件的扩展名:" + fileExtension + "<br><hr>");
            
///'可根据扩展名字的不同保存到不同的文件夹
            
///注意:可能要修改你的文件夹的匿名写入权限。
            postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("images/"+ fileName);
          }
        }
        strStatus.Text 
= strMsg.ToString();
      }
      
catch (System.Exception Ex)
      {
        strStatus.Text 
= Ex.Message;
      }

    }
}
阅读更多
个人分类: asp.net
想对作者说点什么? 我来说一句

ASP.NET实现多文件上传

2011年10月20日 63KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭