简单实现js上传文件功能

时间:2021-05-18

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章