首页 > 编程 > JavaScript > 正文

简单实现js上传文件功能

2019-11-19 15:43:15
字体:
来源:转载
供稿:网友

本文实例为大家分享了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);    }    })   } 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表