簡單實現(xiàn)js上傳文件功能
更新時間：2017年08月21日 17:29:23 作者：靜樂想
這篇文章主要教大家如何簡單實現(xiàn)js上傳文件功能，代碼簡單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)上傳文件功能的具體代碼，供大家參考，具體內(nèi)容如下
一、用input完成上傳，效果圖如
選擇文件后，提交后出現(xiàn)圖片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("網(wǎng)絡(luò)連接失敗,稍后重試",err);
}
})
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript在IE和Firefox上的差異及相互替代的實現(xiàn)方法
我們經(jīng)常在處理ie和firefox下的js總會碰到一些兼容問題，下面是些總結(jié)，希望大家仔細看看研究2008-06-06
這篇文章主要介紹了使用js繪制幾何圖形的方法的系列文章，本文主要講訴正弦曲線的繪制方法,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法,較為詳細的分析了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的原理與具體實現(xiàn)方法,非常具有實用價值,需要的朋友可以參考下2014-10-10
詳解JavaScript兩個實用的圖片懶加載優(yōu)化方法
本文主要介紹了JavaScript兩個實用的圖片懶加載優(yōu)化方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
javascript輕量級庫createjs使用Easel實現(xiàn)拖拽效果
這篇文章主要介紹了javascript輕量級庫createjs使用Easel實現(xiàn)拖拽效果的相關(guān)資料,需要的朋友可以參考下2016-02-02
ElementUI的Dialog彈窗實現(xiàn)拖拽移動功能示例代碼
這篇文章主要介紹了ElementUI的Dialog彈窗實現(xiàn)拖拽移動功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
如何實現(xiàn)select組件的選擇輸入過濾作用，下面有一段js代碼，很實用，需要的朋友可以看看2014-10-10
這篇文章主要為大家詳細介紹了js注冊時輸入合法性驗證方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了Webpack自動化構(gòu)建實踐指南，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
純前端使用ffmpeg實現(xiàn)視頻壓縮的具體方法及踩坑
這篇文章主要給大家介紹了關(guān)于純前端使用ffmpeg實現(xiàn)視頻壓縮的具體方法及踩坑,要在前端使用FFmpeg進行視頻壓縮,你可以使用FFmpeg的JavaScript,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12