js实现上传文件功能 简单实现js上传文件功能

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

js实现上传文件功能 简单实现js上传文件功能

静乐想   2021-03-29 我要评论
想了解简单实现js上传文件功能的相关内容吗,静乐想在本文为您仔细讲解js实现上传文件功能的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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); 
   } 
 
  }) 
 
 } 

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们