源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

简单实现js上传文件功能

  • 时间:2020-01-03 15:57 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下 [b]一、用input完成上传,效果图如[/b]        [img]http://files.jb51.net/file_images/article/201708/2017082117291942.png[/img] 选择文件后,提交后出现图片url [img]http://files.jb51.net/file_images/article/201708/2017082117291943.png[/img] [b]二、传输格式采用form-data形式。 [/b] 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); 
   } 
 
  }) 
 
 } 
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部