javascript - Ajax 文件上传 (HTML5)

Question

是否可以使用 HTML5 + Ajax + jQuery + C# 上传 (pdf) 文件？

我需要上传文件而不重新加载页面。

由于我不是网络开发人员，请“保持简单”回答问题。:)

Answer 1

使用jquery.form插件，做你想做的事情非常简单:

HTML:

<form id="form" action="upload_page.php" method="post" enctype="multipart/form-data">
     <input type="file" size="60" name="file">
     <input type="submit" value="Upload file">
</form>

<div id="progress">
     <div id="bar"></div>
     <div id="percent">0%</div >
</div>

JS:

$(document).ready(function () {

    var options = {
        beforeSend: function () {
            $("#progress").show();
            //clear everything
            $("#bar").width('0%');
            $("#message").html("");
            $("#percent").html("0%");
        },
        uploadProgress: function (event, position, total, percentComplete) {
            $("#bar").width(percentComplete + '%');
            $("#percent").html(percentComplete + '%');

        },
        success: function () {
            $("#bar").width('100%');
            $("#percent").html('100%');

        },
        complete: function (response) {
            $("#message").html("<font color='green'>" + response.responseText + "</font>");
        },
        error: function () {
            $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

        }

    };

    $("#form").ajaxForm(options);

});

这还将为您提供一个不错的进度条，您可以根据需要设置其样式。

Plugin page