如何实现js上传文件功能

这篇文章给大家分享的是有关如何实现js上传文件功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体内容如下

一、用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>

js部分

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上传文件功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！