Question

我正在尝试使用ASP.NET和jQuery实现文件上载功能。我使用输入文件控件，并在我的页面中有7个。该页面是一个包含母版页的ASPX页面。这是我的代码;

ASPX：

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file1" CssClass="col-md-3 control-label">File 1</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file1"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi">
    </div>

</div> 

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file2" CssClass="col-md-3 control-label">File 2</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file2"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi">
    </div>

</div>

JavaScript的：

$(document).ready(function () {
    $("#btnUpload").click(function (event) {
        var file1 = $("#<%=file1.ClientID %>").files[0];
        var file2 = $("#<%=file2.ClientID %>").files[0];

        var files = [file1, file2];

        if (files.length > 0) {
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                formData.append(files[i].name, files[i]);
            }

            var progressbarLabel = $('#progressBar-label');
            var progressbarDiv = $('#progressbar');

            $.ajax({
                url: '../Util/UploadHandler.ashx',
                method: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function () {
                    progressbarLabel.text('Complete');
                    progressbarDiv.fadeOut(2000);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });

            progressbarLabel.text('Uploading...');
            progressbarDiv.progressbar({
                value: false
            }).fadeIn(500);
        }
    });
});

按下上传按钮时出现错误，指出file1为undefined。

我也试过

var file1 = $("#file1").files[0];

和file1再次为undefined。

如何在JavaScript代码中获取file1？

Answer 1

您需要从DOM对象访问files，而不是从jQuery对象访问。

var file1 = $("#<%=file1.ClientID %>").get(0).files[0];
var file2 = $("#<%=file2.ClientID %>").get(0).files[0];

如果files实际上有文件而且不是空的，你应该检查一下。

Answer 2

如果你有runat = server属性，ASP.NET会在你的id的末尾添加一堆字符。如果你没有直接在你的服务器端代码中访问DOM元素，那就放弃它（你永远不应该做的事情）。

Answer 3

尝试将multiple添加到您的输入元素...

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file1" CssClass="col-md-3 control-label">File 1</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file1"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi" multiple>
    </div>

</div> 

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file2" CssClass="col-md-3 control-label">File 2</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file2"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi" multiple>
    </div>

</div>

使用输入文件将JQuery ajax文件上传到ASP.NET

3 个答案: