JAVASCRIPT 上传文件的几种方式
方法1:使用ajax,通过formdata传参//注意:FormData只兼容到IE10var formData = new FormData();var file = $('.import-file-btn').get(0).files[0];formData.append('file', file);formData.append('id', id);formData.append('name
·
方法1:使用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 () {}
});
方法2:使用jquery.form.js
html
<!--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>
js
//注意:可兼容IE浏览器,推荐
$('#import-file-form').ajaxSubmit({
dataType: 'json',
beforeSerialize: function () {
//此处可对参数进行处理
},
success: function (res) {},
error: function (XmlHttpRequest, textStatus, errorThrown) {},
complete: function () {}
});
方法3:使用form表单上传,通过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>
js
//注意:当http请求成功时,即状态码为200时可正常处理逻辑。
//但是状态码不为200时,没有方法识别到当前请求出错了,不推荐
$("#submit-import-file").click();
$("#import-file-iframe").load(function(){
var text = $(this).contents().find("body").text(); //获取到的是json的字符串
console.log(text);
var res= $.parseJSON(text); //json字符串转换成json对象
console.log(res);
});
更多推荐
已为社区贡献1条内容
所有评论(0)