使用formData方式上传form表单里的文件

最新推荐文章于 2023-05-07 16:20:25 发布

原创最新推荐文章于 2023-05-07 16:20:25 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

js问题总结专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种使用JavaScript处理文件上传的方法，通过监听文件输入元素的改变事件，并利用FormData对象进行数据封装，最终通过AJAX实现文件的POST上传。文章详细展示了如何设置HTML表单，如何使用JavaScript监听文件选择变化，以及如何配置AJAX请求。

html部分

	<form id="form1" enctype="multipart/form-data" method="post" name="form1">
    	<input name="fileinput" type="file"  id="s_scIpt"/>
	</form>
    <button id="s_Sc">上传</button>

js部分

var docFileS=document.getElementById("s_scIpt");
docFileS.addEventListener("change", changepic, false);
$('#s_Sc').click(function(){
	$('#s_scIpt').click();
})

 
function changepic() {
	var formData=new FormData();
	formData.append("file", $("#s_scIpt")[0].files[0]);   //如果是上传的文件，键值名必为file
    console.log(formData.get('file'));
    $.ajax({
        type:"post",
        url:url,
        cache: false,
        data:formData,
        processData:false,
        contentType:false,
        success:function(result){
            console.log(result);
            console.log(result.data);
            getscInfo(result.data)
        },
        error:function(){
        	alert(1)
        }
    });
}