简单实现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);
  }

})

}

来源：http://blog.csdn.net/zhengyanan110/article/details/77451020