简单实现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自运行时钟
如果每秒通过ajax加载服务器时间的话，就会产生大量的请求，于是打算使用js 来解决这个需求
2014-06-06
使用layui实现的左侧菜单栏以及动态操作tab项方法
今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Bootstrap学习笔记之css样式设计(2)
这篇文章主要为大家详细介绍了Bootstrap学习笔记之css样式设计，感兴趣的小伙伴们可以参考一下
2016-06-06
用javascript模仿ie的自动完成类似自动完成功的表单
最近在写一个javascript框架,看见网上有不少自动完成功能的表单,于是用javascript写了一个，需要的朋友可以参考下
2012-12-12
JS实现导出Excel的五种方法详解【附源码下载】
这篇文章主要介绍了JS实现导出Excel的五种方法,结合实例形式较为详细的分析了基于table表格导出Excel文件的相关操作技巧,并附源码供读者下载参考,需要的朋友可以参考下
2018-03-03
webpack的tree shaking的实现方法
这篇文章主要介绍了webpack的tree shaking的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
js实现图片切割功能
这篇文章主要为大家详细介绍了js实现图片切割功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
webpack配置的最佳实践分享
在网上看到很多人都写了“webpack最佳实践方案”，适合的才是“最佳”的，在这里总结一下自己在工作过程中总结出来的最佳实践，所以本文主要介绍了关于webpack配置的相关资料，需要的朋友们可以参考借鉴，下面来一起看看吧。
2017-04-04
Js动态设置rem来实现移动端字体的自适应代码
这篇文章主要介绍了Js动态设置rem来实现移动端字体的自适应代码，代码简单易懂非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-10-10
JS代码实现百度地图画圆删除标注
这篇文章主要介绍了JS代码实现百度地图画圆删除标注的相关资料,实现此功能的设计思路非常明确，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友参考下吧
2016-10-10