欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简单实现js上传文件功能

程序员文章站 2022-11-26 11:08:25
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下 一、用input完成上传,效果图如     ...

本文实例为大家分享了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); 
   } 
 
  }) 
 
 } 

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