重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊、服務(wù)器等服務(wù)
js實現(xiàn)圖片上傳并預(yù)覽功能
本文為大家分享了js實現(xiàn)圖片上傳并預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下
10年積累的網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有伊川免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
思路：完成這個功能，首先需要美化上傳圖片的按鈕，然后添加一個標(biāo)簽，在圖片上傳之后，用新圖片的src替換原來
標(biāo)簽中的src。
如下圖所示，是原始的按鈕樣式：
美化步驟：
（1）將上傳圖片標(biāo)簽采用絕對定位，使之位于一個圖片，按鈕，div等標(biāo)簽上。或者給圖片，按鈕或div設(shè)置絕對定位，總之，是要讓上傳文件按鈕和用戶指定的按鈕重合。
（2）給上傳圖片標(biāo)簽設(shè)置大大小，使之和與它重疊的圖片，按鈕，div等標(biāo)簽大小一致。
（3）我將此標(biāo)簽設(shè)置為透明：opacity：0；
如下圖所示，是兩種美化后的上傳圖片按鈕：
接下來是完成圖片預(yù)覽的功能，步驟：
（1）首先需要定義好一個，src為空或者是默認(rèn)圖片，
（2）如果src為空，就給定義好的img設(shè)置為透明：opacity：0；如果不是透明的話，會顯示一個圖片的標(biāo)志，不美觀。
（3）點擊上傳圖片后，獲取上傳的圖片的src，將它賦值給事先定義好的，再給
設(shè)置opacity：1；
接下來為具體的代碼示例。
示例一：將圖片上傳到點擊的位置。（此示例中使用了AUI框架，但不影響此功能。）
HTML代碼：
點擊上傳
CSS代碼：
#imgPreview {
width: 40%;
height: 180px;
margin: 10px auto 0px auto;
border: 1px solid black;
text-align: center;
}
#prompt3 {
width: 100%;
height: 180px;
text-align: center;
position: relative;
}
#imgSpan {
position: absolute;
top: 60px;
left: 40px;
}
.filepath {
width: 100%;
height: 100%;
opacity: 0;
}
#img3 {
height: 100%;
width: 100%;
display: none;
}JS代碼：
function changepic() {
$("#prompt3").css("display", "none");
var reads = new FileReader();
f = document.getElementById('file').files[0];
reads.readAsDataURL(f);
reads.onload = function(e) {
document.getElementById('img3').src = this.result;
$("#img3").css("display", "block");
};
}效果如下圖所示：
示例二：將圖片上傳到點擊按鈕旁邊的位置。（此示例中使用了阿里巴巴矢量圖標(biāo)庫，但不影響此功能。）
HTML代碼：
添加圖片
CSS代碼：
#img {
float: left;
margin-left: 20px;
width: 150px;
height: 60px;
}
#upImg {
position: absolute;
top: 0px;
left: 0px;
}
#upImg input {
width: 70px;
height: 60px;
opacity: 0;
}
#imgPreview {
width: 80px;
height: 60px;
position: absolute;
left: 70px;
top: 0px;
}
#cropedBigImg{
width: 100%;
height: 100%;
display: none;
}JS代碼：
$('#chooseImage').on('change', function() {//當(dāng)chooseImage的值改變時，執(zhí)行此函數(shù)
var filePath = $(this).val(), //獲取到input的value，里面是文件的路徑
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
src = window.URL.createObjectURL(this.files[0]); //轉(zhuǎn)成可以在本地預(yù)覽的格式
// 檢查是否是圖片
if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
error_prompt_alert('上傳錯誤,文件格式必須為：png/jpg/jpeg');
return;
}else{
$('#cropedBigImg').css('display','block');
$('#cropedBigImg').attr('src', src);
}
});效果如下圖所示：
本人為JS實習(xí)生一枚，不斷學(xué)習(xí)，不斷進(jìn)步，歡迎各位前輩批評指教。
如果大家想對JS有更加深入系統(tǒng)的學(xué)習(xí)，可以參閱 JavaScript忍者秘籍 這本經(jīng)典書籍。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
新聞標(biāo)題：js實現(xiàn)圖片上傳并預(yù)覽功能
當(dāng)前鏈接：http://www.xueling.net.cn/article/iiddds.html