Ajax传送表单中HtmlinputControl给后台，求如何处理 （asp.net）

[BlueSkyInMyEye]

主要是判断提交的文件类型是否符合所规定的类型
然后调用Ajax 传送表单中得<input>元素

前台页面upload1.aspx 以及其javascript

var AjaxServerPageName = "upload1_AjaxServer.aspx"; //"upload1.aspx"; //
var XmlHttp;

function controlVisible(obj) {
    var rdoYes = document.getElementById("rdoYes");
    var rdoNo = document.getElementById("rdoNo");
    var btnReset = document.getElementById("btnReset");
    var btnUpload = document.getElementById("btnUpload");
    var uplfile = document.getElementById("uplfile");

    if (rdoYes.checked) {
        rdoNo.checked = false;
        btnReset.disabled = false;
        btnUpload.disabled = false;
        uplfile.disabled = false;
    }
}

function controlVisible2(obj) {
    var rdoYes = document.getElementById("rdoYes");
    var rdoNo = document.getElementById("rdoNo");
    var btnReset = document.getElementById("btnReset");
    var btnUpload = document.getElementById("btnUpload");
    var uplfile = document.getElementById("uplfile");

    //obj.checked = true;
    if (rdoNo.checked) {
        rdoYes.checked = false;
        btnReset.disabled = true;
        btnUpload.disabled = true;
        uplfile.disabled = true;
    }
}

/*---------------------------------------------------
Ensure the uploaded file is a picture type
--------------------------------------------------*/
function validateImgType(path) {
    var arrlist = ".gif.jpg.bm.png.jpeg.tiff";
    var ext = getExt(path);
    if (arrlist.indexOf(ext.toLowerCase()) == -1) {
        alert("This file is not a supported picture type, replace it with one of these types: [.gif|.jpg|.bmp|.png|.jpeg|.tiff]");
    }
    return true;
}

//Get the file extension name
function getExt(path) {
    var arrlist = path.split(".");
    if (arrlist.length > 0) {
        return arrlist[arrlist.length - 1];
    }
    else {
        return "";
    }
}

/*-----------------------------------------------
Ajax
-------------------------------------------------*/

function CreateXmlHttp() {
    try {
        XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (ex) {
            XmlHttp = null;
        }
    }

    if (!XmlHttp && typeof XMLHttpRequest != "undefine") {
        XmlHttp = new XMLHttpRequest();
    }
}

function upload() {
    var hiddenField = document.getElementById("HiddenField");
    var PNum = hiddenField.value;

    var uplfile = document.getElementById("uplfile")
    var path = encodeURI(uplfile.value);

    if (validateImgType(uplfile.value)) {

        var uri = AjaxServerPageName;  //+ "?PNum=" + PNum + "&Path=" + path;
        //uri = encodeURI(uri);
        var getElememt = getFormAllElements();

        CreateXmlHttp();

        if (XmlHttp) {
            XmlHttp.open("POST", uri, true);
            XmlHttp.setRequestHeader("IsUseAjax", "ajax");
            XmlHttp.onreadystatechange = handleResponse;
            XmlHttp.send(getElememt);
        }    
    }
}

function handleResponse() {
    if (XmlHttp.readyState == 4) {
        if (XmlHttp.status == 200) {
            uploadFile(XmlHttp.responseXML.documentElement);
        }
        else {
            alert("There was a problem retrieving data from the server");
        }
    }
}

function uploadFile(root) {
    if (root != null){
        var divMessage = document.getElementById("message");
        var divFileName = document.getElementById("UploadedfileName");

        if (root.childNodes.length > 0) {
            var node = root.childNodes[0];

            var IsSuccess = node.childNodes[0].text;
            var message = node.childNodess[1].text;
            var fileName = node.childNodes[2].text;
            var InServerName = node.childNodes[3].text;

            if (Boolean(IsSuccess)) {
                divFileName.innerHtml += "<strong>" + fileName + "</strong>" + "<br/>";
                divMessage.innerHtml = "消息提示：" + message;
            }
            else {
                divMessage.innerHtml = "消息提示：" + message;
                alert("消息提示：" + message);
            }
            
        }       
    }
    else {       
        alert("Can't get XmlHttp.responseXml.documentElement");
    }
    XmlHttp.setRequestHeader("IsUseAjax", "normal");
}

function getFormAllElements() {
    //var form = document.getElementById("form1");
    var elm = "";
    var theform = document.forms[0];
    for (var i = 0; i < theform.elements.length; i++) {
        var e = theform.elements[i].outerHTML;
        elm += e;
    }
    return elm;
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="js/upload1.js"></script>


    <style type="text/css">
        .style1
        {
            height: 20px;
        }
    </style>
</head>
<body style=" font: small-caps 600 9pts/18pts 楷体_GB2312;">
        <!--表单元素中的 enctype 属性规定了传递给服务器的表数据集编码的内容类型。enctype   
        属性的默认值是“application/x-www-form-urlencoded”，但当向服务器传送大量文本、
        包含非ASCII字符或二进制数的数据时，这个默认类型就不能胜任hq了。
        这时，文件上载提交表单时应使用“multipart/form-data”内容类型。-->
        <form id="form1" runat="server">
            <asp:HiddenField ID="HiddenField" runat="server" /><br />       
        <div style=" position:absolute;width:420px;">
            <table cellspacing="0" cellpadding="4" border="1" rules="all" 
                style="font-size:small; border-width:1px; border-bottom: #4169e1 1px;
                border-style:None;border-collapse:collapse; background-color:White; width:420px;">
                <tr><td>
                    <asp:Label ID="Label11" runat="server" BackColor="LightGray" Font-Bold="True" Font-Size="Small" Text="是否需要上传附件？" Width="270px"></asp:Label>
                </td></tr>
                <tr><td class="style1">
                   <input id="rdoYes" type="radio" onclick="controlVisible(this)" />是
                   <%-- <asp:FileUpload ID="uplfile" runat="server" Enabled="False" Font-Size="Small" Height="21px" Width="270px" />--%>
                   <input id="uplfile" type="file" disabled="disabled" runat="server" style="height:21px;width:265px; font-size:small;"/>
                   <input id="btnUpload" type="button" value="上传" disabled="disabled"  style="height:21px;width:45px;"  onclick="upload()"/>
                   <input id="btnReset" type="button" value="重置" style="height:21px;width:45px;" disabled="disabled" />
                </td></tr>
                <tr><td>
                    <input id="rdoNo" checked="checked" type="radio" onclick="controlVisible2(this)" />否
                </td></tr>
                <tr><td style ="text-align :right ;">
                    <asp:Button id="btnNext" runat="server" Text="下一步" Width="63px" Height="21px"></asp:Button>       
                </td></tr>
                <tr><td>
                    <div id="UploadedfileName" style="background-color:#FFFACD;color:black;">
                    
                        
                        已上传文件：<br />
                    
                        
                    </div>
                </td></tr>
            </table>

        </div>
        <div style="position:absolute;margin-left:440px;width:250px; background-color:#FFFACD;color:Red;" id="message">
        </div>
        </form>
</body>
</html>

后台的页面为：upload1_AjaxServer.aspx

问在后台，如何将传送过来的元素，添加到后台的网页（upload1_AjaxServer.aspx）添加这个几个控件

[BlueSkyInMyEye]

55555，没有人来啊~~~~~~

生成的字符串大概这样：

<INPUT id=__VIEWSTATE value=/wEPDwUKLTg2MzI4NzI5OQ8WAh4JUHJvZ3JhbUlkAgEWAgIDDxYCHgdlbmN0eXBlBRNtdWx0aXBhcnQvZm9ybS1kYXRhZGQo3ZbhwwOh6ztSq2AL2j5A0CcUvBxUVSNG492hQtb7DA== type=hidden name=__VIEWSTATE>
<INPUT id=__EVENTVALIDATION value=/wEWAwLBt4eYBwKQo5bvAwK14fOOCkL3L8KYjXDSNtE5z2jjrapsd/zqNK/My5+pLP6WG4UK type=hidden name=__EVENTVALIDATION>
<INPUT id=HiddenField value=1 type=hidden name=HiddenField>
<INPUT id=rdoYes onclick=controlVisible(this) type=radio>
<INPUT style="WIDTH: 265px; HEIGHT: 21px; FONT-SIZE: small" id=uplfile value="C:\Documents and Settings\luoj\My Documents\My Pictures\ifeng\rdn_4e713b48cff40.jpg" type=file name=uplfile>
<INPUT style="WIDTH: 45px; HEIGHT: 21px" id=btnUpload onclick=upload() value=上传 type=button>
<INPUT style="WIDTH: 45px; HEIGHT: 21px" id=btnReset value=重置 type=button>
<INPUT id=rdoNo onclick=controlVisible2(this) CHECKED type=radio>
<INPUT style="WIDTH: 63px; HEIGHT: 21px" id=btnNext value=下一步 type=submit name=btnNext>

[阿非]

你说下你的需求吧

[BlueSkyInMyEye]

大概就是使用Ajax上传文件，但是现在有个问题，就是无论 file 控件，还是uploadFile控件，都不能够实现

[BlueSkyInMyEye]

但是如果将前台的控件所有信息（包括值）传送给AjaxServer页面，然后在AjaxServer页面中添加，然后再调用其中的方法就可以实现了

[阿非]

异步上传文件要用 iframe

不要使用XmlHttpRequest

[BlueSkyInMyEye]

iframe....这个真的不知道，有没有例子？

[BlueSkyInMyEye]

或者给个网址.....

[阿非]

http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html

[BlueSkyInMyEye]

要实现AJAX的无刷新异步提交，以上方法明显行不通，在网上查找方案，得到JQEURY实现的方法，其源码文件名为ajaxfileupload.js，该方法的实质是首先创建一个IFRAME，然后在这个IFRAME里嵌入一个FORM表单，在数据提交页面传入一个JSON类型的值，通过参数的传递，得到FILE控件的ID值，通过clone()方法克隆该控件，然后appendTo(Form)把克隆的控件追加创建的FORM表单中。最后，通过URL参数设置FORM的action，在SETTIMEOUT函数中出发FORM的submit事件，向服务器文件发送request请求。这样，在处理文件中通过HttpPostedFile file = context.Request.Files[0];获取FILE控件了。

但是源码中没有提供text控件和select控件等值的传递，如果我们既要上传数据，又要上传文件的话，就只能以分步进行的方式来提交，这样的坏处在于不能实时监测错误，如果第一步错了，而第二步成功，或者第二步成功第一步出错，都会给用户带来麻烦。

这个是JQuery 的方法

[BlueSkyInMyEye]

谢谢，研究中

[zell419]

我也是用个iframe 专门处理上传 。
效果也不错 。