javascript - 可以从文件上传输入中获取文件数据/val，并使用 Ajax 请求将其发送到服务器

Question

基本上，在您单击浏览并选择文件后，会立即触发以下内容。

我只需要完成用户通过常规文件输入类型选择的文件的单个文件上传，我希望它在文件被选择并在后台异步完成后立即触发。

<input type="file" name="imagefile" size="20" />

$('input[type="file"]').change(function () {

    var $file = $(this).val();

    $.ajax({
        url: "/Admin/BannerImageUpload",
        type: 'POST',
        processData: false,
        contentType: false,
        data: { file: $file },
        success: function (data) {
            alert('Load was performed.');
        }


    });

});

Answer 1

假设客户端浏览器支持，您可以使用HTML5 File API异步上传文件。如果您想查看实现它的必要步骤，请查看我链接到的文档末尾的示例：上传用户选择的文件部分。

另一种可能性是使用现有的即用型 AJAX 文件上传组件，例如实现此功能的Blueimp 。使用这种控件的优点是，如果浏览器不支持 HTML5，它将回退到标准上传机制。