基于FormData与jQuery实现文件上传
作者:函数茶馆时间:2026-10-22 07:35:36浏览:291
本文介绍如何使用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);
}
})
}
以上就是本文的全部内容,希望对读者的学习有所帮助,也欢迎大家继续支持本站。
作者最新文章
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
