基于FormData与jQuery实现文件上传

作者:函数茶馆时间:2026-10-22 07:35:36浏览:291

本文介绍如何使用HTML5的FormData对象结合jQuery的AJAX方法实现前端文件上传功能。通过配置processData和contentType为false,确保文件数据正确传输至服务器,并处理上传成功后的URL显示与图片预览。

基于FormData与jQuery实现文件上传

本文分享了一段使用JavaScript实现文件上传功能的具体代码,供读者参考学习。

首先,通过HTML中的input元素完成文件选择与上传操作,效果如图所示。

基于FormData与jQuery实现文件上传

用户选择文件并提交后,系统将返回图片的URL地址。

基于FormData与jQuery实现文件上传

在数据传输格式方面,本文采用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); 
   } 
 
  }) 
 
 } 

以上就是本文的全部内容,希望对读者的学习有所帮助,也欢迎大家继续支持本站。

作者最新文章