在Web开发中，上传文件是常见的需求。本文介绍了三种使用JavaScript上传文件的方式。

方法1：使用Ajax，通过FormData传参

这种方式使用Ajax结合FormData对象来上传文件。需要注意的是，FormData对象只兼容IE10及以上的浏览器。

var formData = new FormData();
var file = $('.import-file-btn').get(0).files[0];

formData.append('file', file);
formData.append('id', id);
formData.append('name', name);

$.ajax({
    url: 'user/validate_import_data',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false, // 不处理数据
    contentType: false, // 不设置内容类型
    dataType: "json",
    success: function (res) {
        // 成功回调
    },
    error: function (XmlHttpRequest, textStatus, errorThrown) {
        // 错误回调
    },
    complete: function () {
        // 完成回调
    }
});

优点

• 支持异步请求，不刷新页面。
• 方便附带其他参数。

缺点

• 不兼容IE10以下的浏览器。

方法2：使用jquery.form.js

这种方式使用jquery.form.js插件进行文件上传，兼容性较好，推荐使用。

HTML

<form id="import-file-form" action="user/validate_import_data" method='post' enctype='multipart/form-data' target="form">
     <input type="file" name="file" class="import-file-btn" title="">
     <input type="hidden" name="id">
     <input type="hidden" name="name">
</form>

JavaScript

$('#import-file-form').ajaxSubmit({
    dataType: 'json',
    beforeSerialize: function () {
        // 此处可对参数进行处理
    },
    success: function (res) {
        // 成功回调
    },
    error: function (XmlHttpRequest, textStatus, errorThrown) {
        // 错误回调
    },
    complete: function () {
        // 完成回调
    }
});

优点

• 兼容IE浏览器，适用范围广。
• 操作简便，插件提供了丰富的配置选项。

缺点

• 需要引入额外的插件。

方法3：使用Form表单上传，通过Iframe接收回调

这种方式利用<iframe>标签处理文件上传的回调。

HTML

<form id="import-file-form" action="user/validate_import_data" method='post' enctype='multipart/form-data' target="form"> <!-- 注意target不能缺少 -->
    <input type="file" name="file" class="import-file-btn">
    <input type="hidden" name="id">
    <input type="hidden" name="name">
    <button type="submit" id="submit-import-file" style="display:none">提交</button>
</form>
<iframe name="form" id="import-file-iframe" style="display:none"></iframe>

JavaScript

$("#submit-import-file").click();
$("#import-file-iframe").load(function(){
    var text = $(this).contents().find("body").text(); // 获取到的是json字符串
    var res = $.parseJSON(text); // json字符串转换成json对象
    console.log(res);
});

优点

• 兼容性好，支持旧版本浏览器。

缺点

• 无法处理非200状态码的请求，无法检测到请求错误。

这三种方法各有优缺点，可以根据具体需求选择合适的实现方式。如果需要兼容旧版浏览器且不需要异步处理，方法3是一个合适的选择；如果希望使用现代的异步请求并支持附带其他参数，方法1或方法2更为合适。