簡單實(shí)現(xiàn)js上傳文件功能
更新時(shí)間：2017年08月21日 17:29:23 作者：靜樂想
這篇文章主要教大家如何簡單實(shí)現(xiàn)js上傳文件功能，代碼簡單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS中使用FormData上傳文件、圖片的方法
- js獲取上傳文件的絕對(duì)路徑實(shí)現(xiàn)方法
- 一個(gè)簡單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- js實(shí)現(xiàn)點(diǎn)擊按鈕彈出上傳文件的窗口
- file控件選擇上傳文件確定后觸發(fā)的js事件是哪個(gè)
- js判斷上傳文件后綴名是否合法
- 使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版
- jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件
- js獲取判斷上傳文件后綴名的示例代碼
- JS使用base64格式上傳文件
相關(guān)文章
參考discuz的msn聊天功能代碼2008-05-05
JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較
這篇文章主要介紹了JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細(xì)介紹了JS HTML5拖拽上傳圖片預(yù)覽的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
JSON+HTML實(shí)現(xiàn)國家省市聯(lián)動(dòng)選擇效果
實(shí)現(xiàn)國家省市聯(lián)動(dòng)的方法有很多，本文要為大家介紹的JSON+HTML如何實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
一文快速弄懂webpack動(dòng)態(tài)import原理
無論你開發(fā)使用的是CommonJS規(guī)范還是ES6模塊規(guī)范,打包后的文件都統(tǒng)一使用webpack自定義的模塊規(guī)范來管理、加載模塊,下面這篇文章主要給大家介紹了關(guān)于webpack動(dòng)態(tài)import原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
JS實(shí)現(xiàn)兩周內(nèi)自動(dòng)登錄功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)兩周內(nèi)自動(dòng)登錄功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
js彈性勢能動(dòng)畫之拋物線運(yùn)動(dòng)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了js彈性勢能動(dòng)畫之拋物線運(yùn)動(dòng)的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Javascript熱鍵兼容ie，firefox，需要的朋友可以參考下。2010-12-12
非常不錯(cuò)的可以生產(chǎn)標(biāo)簽的小東西2008-04-04
微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07