简单实现js上传文件功能

 更新时间:2017年08月21日 17:29:23   作者:静乐想  
这篇文章主要教大家如何简单实现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); 
   } 
 
  }) 
 
 } 

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

相关文章

  • 网页实时显示服务器时间和javscript自运行时钟

    网页实时显示服务器时间和javscript自运行时钟

    如果每秒通过ajax加载服务器时间的话,就会产生大量的请求,于是打算使用js 来解决这个需求
    2014-06-06
  • 使用layui实现的左侧菜单栏以及动态操作tab项方法

    使用layui实现的左侧菜单栏以及动态操作tab项方法

    今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Bootstrap学习笔记之css样式设计(2)

    Bootstrap学习笔记之css样式设计(2)

    这篇文章主要为大家详细介绍了Bootstrap学习笔记之css样式设计,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 用javascript模仿ie的自动完成类似自动完成功的表单

    用javascript模仿ie的自动完成类似自动完成功的表单

    最近在写一个javascript框架,看见网上有不少自动完成功能的表单,于是用javascript写了一个,需要的朋友可以参考下
    2012-12-12
  • JS实现导出Excel的五种方法详解【附源码下载】

    JS实现导出Excel的五种方法详解【附源码下载】

    这篇文章主要介绍了JS实现导出Excel的五种方法,结合实例形式较为详细的分析了基于table表格导出Excel文件的相关操作技巧,并附源码供读者下载参考,需要的朋友可以参考下
    2018-03-03
  • webpack的tree shaking的实现方法

    webpack的tree shaking的实现方法

    这篇文章主要介绍了webpack的tree shaking的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • js实现图片切割功能

    js实现图片切割功能

    这篇文章主要为大家详细介绍了js实现图片切割功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • webpack配置的最佳实践分享

    webpack配置的最佳实践分享

    在网上看到很多人都写了“webpack最佳实践方案”,适合的才是“最佳”的,在这里总结一下自己在工作过程中总结出来的最佳实践,所以本文主要介绍了关于webpack配置的相关资料,需要的朋友们可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • Js动态设置rem来实现移动端字体的自适应代码

    Js动态设置rem来实现移动端字体的自适应代码

    这篇文章主要介绍了Js动态设置rem来实现移动端字体的自适应代码,代码简单易懂非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • JS代码实现百度地图 画圆 删除标注

    JS代码实现百度地图 画圆 删除标注

    这篇文章主要介绍了JS代码实现百度地图 画圆 删除标注的相关资料,实现此功能的设计思路非常明确,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友参考下吧
    2016-10-10

最新评论