在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更为合适。