本文介绍如何使用HTML5的FormData对象结合jQuery的AJAX方法实现前端文件上传功能。通过配置processData和contentType为false，确保文件数据正确传输至服务器，并处理上传成功后的URL显示与图片预览。
基于FormData与jQuery实现文件上传
本文分享了一段使用JavaScript实现文件上传功能的具体代码，供读者参考学习。
首先，通过HTML中的input元素完成文件选择与上传操作，效果如图所示。
用户选择文件并提交后，系统将返回图片的URL地址。
在数据传输格式方面，本文采用form-data形式进行文件传输。
以下是相关的HTML代码实现。
<form id="upload" enctype="multipart/form-data" method="post">
<input type="file" name="file" id="pic"/>
<input type="button" value="提交" onclick="uploadPic();"/>
<span class="showUrl"></span>
<img src="" class="showPic" alt="">
</form>
接下来是JavaScript部分的逻辑处理。
function uploadPic() {
var form = document.getElementById('upload'),
formData = new FormData(form);
$.ajax({
url:"https://sscpre.boe.com/v1/medical-console/medical/file/upload",
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(res){
if(res){
alert("上传成功！");
}
console.log(res);
$("#pic").val("");
$(".showUrl").html(res);
$(".showPic").attr("src",res);
},
error:function(err){
alert("网络连接失败,稍后重试",err);
}
})
} 以上就是本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。