asp:FileUpload 控件在使用假输入时未获取文件值

Question

我尝试使用一些 css 技巧来自定义我的 asp:FileUpload 控件。最后上传图片的时候，好像asp:FileUpload没有抓到文件。

在aspx页面中：

<style>
    #file {
        display:none;
    }
</style>

                    <div>
                        <div style="float:left;">
                            <asp:Button ID="btnSelectPicture" runat="server" CssClass="btn2small" Text="Select Picture" OnClientClick="javascript:return false;" />
                        </div>
                        <asp:FileUpload ID="fuPicture" runat="server" />
                        <div id="inputUploadFileName" style="float:left; line-height: 2; margin: 0 15px;">No picture selected</div>
                        <div style="float:left;">
                            <asp:Button ID="btnUploadPicture" runat="server" Text="Upload" CssClass="btn2small" OnClick="btnUploadPicture_Click" ValidationGroup="vgUploadp"/>
                        </div>
                        <div id="errorFormatPicture" class="errorMessage" style="float:left; line-height:2; margin-left: 15px;"></div>
                    </div>        

<script>
    var wrapper = $('#<%=fuPicture.ClientID%>').css({ height: 0, width: 0, 'overflow': 'hidden' });
    var fileInput = $('#<%=fuPicture.ClientID%>').wrap(wrapper);

    fileInput.change(function () {
        $this = $(this);
        var fileName = $this.val();
        fileName = fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length);
        if (fileName.length == 0)
            fileName = "No picture selected";
        else {
            extension = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);
            if (extension != "jpg" && extension != "png")
                $("#errorFormatPicture").text(" * png or jpg only");
            else {
                $("#errorFormatPicture").text("");
                $('#inputUploadFileName').text(fileName);
            }
        }
    })

    $('#<%=btnSelectPicture.ClientID%>').click(function () {
        fileInput.click();
        return false;
    }).show();
</script>

然后在aspx.cs页面中：

protected void btnUploadPicture_Click(object sender, EventArgs e)
{
    Response.Write("has file? " + fuPicture.HasFile + "<BR>");


    if (fuPicture.HasFile)
    {
        try
        {
            if (fuPicture.PostedFile.ContentType == "image/jpeg" || fuPicture.PostedFile.ContentType == "image/png")
            {
                if (fuPicture.PostedFile.ContentLength < 500000)
                {
                    string fileDirectory = string.Format("/images/upload/ServiceRequest/{0}/temp_request/", UserId);
                    System.IO.Directory.CreateDirectory(fileDirectory);
                    string fileName = Path.GetFileName(fuPicture.FileName);
                    string _fullFile = fileDirectory + fileName;

                    fuPicture.SaveAs(_fullFile);
                    lbErrorUploadPicture.Text = "uploaded";

                    //Loadthumbnail();
                }
                else
                    lbErrorUploadPicture.Text = "Pictures must be less than 500 kb";
            }
            else
                lbErrorUploadPicture.Text = "Pictures must be jpeg or png format";
        }
        catch (Exception ex)
        {
            lbErrorUploadPicture.Text = "Unexpected error: Pictures could not be uploaded. ";
        }
    }
}

FileUpload 中从来没有文件。我应该在哪里改变它？谢谢大家。

Answer 1

没有什么会立即跳出来给我。我建议：

首先，注释掉你的 JavaScript。当您不先修改底层 HTML 标记时，FileUpload 控件是否工作？如果是这样，请仔细查看 JavaScript 中的这两行：

var wrapper = $('#<%=fuPicture.ClientID%>').css({ height: 0, width: 0, 'overflow': 'hidden' });
var fileInput = $('#<%=fuPicture.ClientID%>').wrap(wrapper);

也许罪魁祸首在于试图在标记中隐藏该值。