js實(shí)現(xiàn)上傳圖片并顯示圖片名稱
更新時(shí)間：2019年12月18日 08:55:21 作者：小女子的博客
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片并顯示圖片名稱，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js上傳圖片并顯示圖片名稱的具體代碼，供大家參考，具體內(nèi)容如下
今天整理了一下上傳圖，用jquery的還是方便點(diǎn)，小女子整理的是原生的js?。?！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img{max-width: 100%; height: 100px;margin: 10px 20px;}
.img_list .img-div{width: 100px;height: 200px; float: left; overflow: hidden;text-align: center; }
.upload{position: relative;}
.upload input{opacity: 0;position: absolute;top: 0;left: 10px;height: 100px;width: 100px;}
.upload .upload_box{width: 100px;height: 100px;background-color: pink;color: white;}
.img-div p{color: #28a4b0;margin: 0;}
</style>
</head>
<body>
<div class="upload">
<input class="file_input" type="file" multiple id="avc"/>
<div class="upload_box">
點(diǎn)我上傳圖片哦
</div>
</div>
<div class="img_list">
</div>
<script>
var file_input=document.getElementsByClassName("file_input")[0];
// 觸發(fā)事件用的是change，因?yàn)閒iles是數(shù)組，需要添加下標(biāo)
file_input.addEventListener("change",function(){
var obj=this;
var obj_name=this.files[0].name;
var img_length=obj.files.length;
for(var i=0;i<img_length;i++)
{
if(!(/image\/\w+/).test(obj.files[i].type))
{
alert("上傳的圖片格式錯(cuò)誤，請(qǐng)上傳圖片");
return false;
}
var reader = new FileReader();
reader.error=function(e){
alert("讀取異常")
}
reader.onload = function(e){
// div_html是包括圖片和圖片名稱的容器
var img_html='<img src="'+e.target.result+'"/>';
var div_html=document.createElement("div");
var p_html=document.createElement("p");
if(document.getElementsByClassName("img_list")[0].children.length<5)
{
div_html.innerHTML=img_html;
div_html.appendChild(p_html);
p_html.innerHTML=obj_name;
div_html.className="img-div";
document.getElementsByClassName("img_list")[0].appendChild(div_html);
}else{
alert("最多上傳5張圖片")
}
};
reader.οnlοadstart=function(){
console.log("開(kāi)始讀取"+obj_name);
}
reader.οnprοgress=function(e){
if(e.lengthComputable){
console.log("正在讀取文件")
}
};
reader.readAsDataURL(obj.files[i]);
}
})
</script>
</body>
</html>
更多精彩內(nèi)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能
- javascript實(shí)現(xiàn)移動(dòng)端上傳圖片功能
- javascript實(shí)現(xiàn)移動(dòng)端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
- Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解
- 通過(guò)js實(shí)現(xiàn)壓縮圖片上傳功能
- JS+HTML實(shí)現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析
- JS實(shí)現(xiàn)壓縮上傳圖片base64長(zhǎng)度功能
- JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
- Nodejs實(shí)現(xiàn)圖片上傳、壓縮預(yù)覽、定時(shí)刪除功能
- JavaScript實(shí)現(xiàn)圖片上傳并預(yù)覽并提交ajax
- Js實(shí)現(xiàn)粘貼上傳圖片的原理及示例
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js數(shù)組去重九種方式以及詳解的相關(guān)資料,js數(shù)組去重是比較常見(jiàn)的數(shù)組操作方式之一,文中介紹了九種方法,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了一個(gè)值得分享的bootstrap table實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了小程序錄音功能實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
在ECMAScript中,變量可以存在兩種類型的值,即原始值和引用,這篇這篇文章主要給大家介紹了關(guān)于ECMAScript中的原始值和引用值的相關(guān)資料,需要的朋友可以參考下2021-08-08
ES6（ECMAScript 6,也稱為ES2015）是JavaScript的一個(gè)重要更新版本,引入了許多新的語(yǔ)言特性和改進(jìn),使得JavaScript變得更加現(xiàn)代化、易讀、易維護(hù)和更適合大型應(yīng)用程序的開(kāi)發(fā),ES6的主要變化歸納為：語(yǔ)法糖、新機(jī)制、更好的語(yǔ)義、更多的內(nèi)置對(duì)象和方法2023-11-11
淺談JavaScript中小數(shù)和大整數(shù)的精度丟失
下面小編就為大家?guī)?lái)一篇淺談JavaScript中小數(shù)和大整數(shù)的精度丟失。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JS實(shí)現(xiàn)新浪微博效果帶遮罩層的彈出框代碼
這篇文章主要介紹了JS實(shí)現(xiàn)新浪微博效果帶遮罩層的彈出框代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
淺析Js中的單引號(hào)與雙引號(hào)問(wèn)題
本文是對(duì)Js中單引號(hào)與雙引號(hào)的使用進(jìn)行了總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
該播放器類似框架式的~設(shè)置在頁(yè)面底部 即使查看網(wǎng)頁(yè)的另一個(gè)頁(yè)面，歌曲也不會(huì)因?yàn)樗⑿露Ｖ共⒅匦虏シ?/div> 2006-10-10
淺析JavaScript中的平穩(wěn)退化（graceful degradation）
所謂平穩(wěn)退化，就是指可以讓訪問(wèn)者在瀏覽器不支持javascript或者禁用了JavaScript的時(shí)候依舊可以順利的瀏覽你的網(wǎng)頁(yè)，下文給大家簡(jiǎn)單介紹了js中的平穩(wěn)退化，感興趣的朋友一起看看吧2017-07-07最新評(píng)論