当前位置:主页 > javascript教程 > 简单实现js上传文件功能

js上传文件功能的实例讲解

发布:2019-09-24 13:45:29 191


给大家整理一篇相关的编程文章,网友巴和玉根据主题投稿了本篇教程内容,涉及到js、上传文件、简单实现js上传文件功能相关内容,已被879网友关注,涉猎到的知识点内容可以在下方电子书获得。

简单实现js上传文件功能

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

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

简单实现js上传文件功能

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

简单实现js上传文件功能

二、传输格式采用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); 
   } 
 
  }) 
 
 } 

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


参考资料

相关文章

  • JS查找文章里词频最高的单词

    发布:2020-01-20

    这篇文章主要为大家详细介绍了JS查找英文文章中出现频率最高的单词,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • node.js微信授权获取用户信息

    发布:2020-03-11

    这篇文章主要介绍了node.js实现微信开发之获取用户授权,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • js指定倒计时的实例代码

    发布:2019-12-16

    这篇文章主要为大家详细介绍了js实现指定时间倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • java中处理json各种各样的转换方法(推荐)

    发布:2023-01-11

    给网友朋友们带来一篇关于java的教程,下面小编就为大家分享一篇java中处理json各种各样的转换方法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • Vue2.0使用过程常见的问题及解决方法

    发布:2019-12-03

    本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习,详细的介绍了使用中会遇到的各种错误,有兴趣的可以了解一下。


  • 详解java 中Spring jsonp 跨域请求的实例

    详解java 中Spring jsonp 跨域请求的实例

    发布:2022-10-20

    为网友们分享了关于java的教程,这篇文章主要介绍了详解java 中Spring jsonp 跨域请求的实例的相关资料,jsonp 可用于解决主流浏览器的跨域数据访问的问题,需要的朋友可以参考下


  • 关于Intellij Idea中jstl标签库的用法

    发布:2020-03-14

    这篇文章主要介绍了在Intellij Idea中使用jstl标签库的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • python修改json文件的value实例方法

    发布:2019-09-03

    今天小编就为大家分享一篇利用python修改json文件的value方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


网友讨论