原生JS实现HTML文件上传,简单实现js上传文件功能

原生JS实现HTML文件上传,简单实现js上传文件功能本文实例为大家分享了 js 实现上传文件功能的具体代码 供大家参考 具体内容如下一 用 input 完成上传 效果图如选择文件后 提交后出现图片 url 二 传输格式采用 form data 形式 html 代码 js 部分 functionuplo varform document getElementBy upload formData newFormData form

本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下

一、用input完成上传,效果图如

b4ff8beca26d30ca46256383591058a9.png

选择文件后,提交后出现图片url

f3280fb5ff72f73f26c9a7f3d0cf9df2.png

二、传输格式采用form-data形式。

html代码

原生JS实现HTML文件上传,简单实现js上传文件功能

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);

}

})

}

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/221220.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午6:38
下一篇 2026年3月17日 下午6:38


相关推荐

  • 微信小程序后台服务器怎么配置,如何在微信小程序后台设置服务类目

    微信小程序后台服务器怎么配置,如何在微信小程序后台设置服务类目微信小程序制作时 需要对微信小程序的各个方面进行设置 其中微信规定 在微信小程序发布前 必须要对微信小程序进行服务类目的设置 所以 所有微信小程序用户都需要在申请微信小程序后 提交审核微信小程序前选择一个服务类目进行设置 本次设置需要耗时 10 分钟 下面就让小编给您带来服务类目的详细设置步骤 一 首先需要登录您的微信小程序帐号登录页面链接 https mp weixin com 提示 微

    2026年3月17日
    2
  • Suse发生了错误Access denied for user ''@'localhost' to&

    Suse发生了错误Access denied for user ''@'localhost' to&

    2022年1月8日
    46
  • session.setAttribute(“key”,value);

    session.setAttribute(“key”,value);1、session.setAttribute(“key”,value);是session设置值的方法,原理同java中的HashMap的键值对,意思也就是key现在为“user”;存放的值为userName,userName应该为一个String类型的变量吧?看你自己的定义。2、可以使用session.getAttribute(“key”);来取值,以为着你能得到userName的值。3、注意…

    2022年10月16日
    8
  • 小学没跟上编程的步伐,长大了这样弥补,网友:一切都是为了生活「建议收藏」

    小学没跟上编程的步伐,长大了这样弥补,网友:一切都是为了生活「建议收藏」浙江省今年9月份开始的新学期,三到九年级信息技术课将同步替换新教材,其中,八年级将新增Python课程内容。新高一信息技术编程语言由VB替换为Python,大数据、人工智能、程序设计与算法等内容按照教材规划五六年级开始接触。随着我国北京、上海、广州、重庆、江苏等多地政策推广少儿编程教育的力度逐步增大,家长们愈发重视编程教育,一方面可以为高考选中的信息技术课程做铺垫,另一方面从小培养大数据意识。因为学习少儿编程除了帮孩子适应未来时代发展潮流,还可以培养孩子的抽象思考能力,帮助孩子训练整合信息、融汇贯通

    2022年5月16日
    46
  • 安卓获取sha1_android获取真实时间

    安卓获取sha1_android获取真实时间此文介绍AndroidStudio中获取SHA1的方法。获取开发中的SHA1:在右侧找到菜单栏“Gradle”—>”APP名”—>“Tasks”—>“android”—>双击“signReport”即可。这时生成出来的只是debug的SHA1和MD5值:获取:获取发布版本的SHA1:请自行生成签名文件,打开androidst…

    2022年8月11日
    9
  • html左侧浮动广告代码,如何制作浮动广告 JavaScript制作浮动广告代码

    html左侧浮动广告代码,如何制作浮动广告 JavaScript制作浮动广告代码如果有一定的JavaScript基础,制作浮动广告还是比较容易的。直接上代码了:无标题文档*{margin:0;padding:0;}#csdn{width:800px;margin:0auto;}#ad{position:absolute;right:0px;top:30px;z-index:1;}#cl{position:absolute;right:0px;top:30px;z-index…

    2026年2月5日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号