JAVASCRIPT 上传文件的几种方式「建议收藏」

全栈程序员站长

发布于 2022-11-03 06:53:40

5.2K01

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：1

代码可运行

方法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 () {}
});

Jetbrains全家桶1年46，售后保障稳定

方法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);
});