網站首頁 學習教育 IT科技 金融知識 旅遊規劃 生活小知識 家鄉美食 養生小知識 健身運動 美容百科 遊戲知識 綜合知識
當前位置:趣知科普吧 > IT科技 > 

js上傳檔案方法

欄目: IT科技 / 發佈於: / 人氣:9.91K

在js中實現上傳檔案功能一般是可以運用input完成上傳,在上傳時需要選擇檔案,選擇檔案之後,提交後就會出現圖片url,當然需要注意的是,其傳輸格式大部分是採用form-data形式上傳的。

js上傳檔案方法

參考範例:

在js中實現上傳檔案可使用的代碼,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上傳檔案方法 第2張

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); 

   } 

  

  }) 

  

 }

Tags:檔案 js