頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

js實現圖片上傳并預覽功能

文件上傳 7v 1月前  次瀏覽

思路:完成這個功能,首先需要美化上傳圖片的按鈕,然后添加一個標簽,在圖片上傳之后,用新圖片的src替換原來標簽中的src。

如下圖所示,是原始的按鈕樣式:

美化步驟:

(1)將上傳圖片標簽采用絕對定位,使之位于一個圖片,按鈕,div等標簽上?;蛘呓o圖片,按鈕或div設置絕對定位,總之,是要讓上傳文件按鈕和用戶指定的按鈕重合。

(2)給上傳圖片標簽設置大大小,使之和與它重疊的圖片,按鈕,div等標簽大小一致。

(3)我將此標簽設置為透明:opacity:0;

如下圖所示,是兩種美化后的上傳圖片按鈕:

接下來是完成圖片預覽的功能,步驟:

(1)首先需要定義好一個,src為空或者是默認圖片,

(2)如果src為空,就給定義好的img設置為透明:opacity:0;如果不是透明的話,會顯示一個圖片的標志,不美觀。

(3)點擊上傳圖片后,獲取上傳的圖片的src,將它賦值給事先定義好的,再給設置opacity:1;

接下來為具體的代碼示例。

示例一:將圖片上傳到點擊的位置。(此示例中使用了AUI框架,但不影響此功能。)

HTML代碼:

?
<div id="imgPreview">
 <div id="prompt3">
 <span id="imgSpan">
 點擊上傳
 <br />
 <i class="aui-iconfont aui-icon-plus"></i>
 <!--AUI框架中的圖標-->
 </span>
 <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
 <!--當vaule值改變時執行changepic函數,規定上傳的文件只能是圖片-->
 </div>
 <img src="#" id="img3" />
</div>

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

效果如下圖所示:

示例二:將圖片上傳到點擊按鈕旁邊的位置。(此示例中使用了阿里巴巴矢量圖標庫,但不影響此功能。)

HTML代碼:

?
<div class="aui-col-xs-3" id="img">
 <svg class="icon bigIcon" aria-hidden="true">
 <use xlink:href="#icon-msnui-add"></use>
 </svg>
 <!--阿里巴巴矢量圖標,就是最后效果圖中的“+”圖標-->
 <div class="aui-grid-label">添加圖片</div>
 <div id="upImg">
 <input type="file" name="file" id="chooseImage" />
 </div>
 <div id="imgPreview">
 <img src="#" id="cropedBigImg" />
 </div>
</div>

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() {//當chooseImage的值改變時,執行此函數
 var filePath = $(this).val(), //獲取到input的value,里面是文件的路徑
 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
 src = window.URL.createObjectURL(this.files[0]); //轉成可以在本地預覽的格式
  
 // 檢查是否是圖片
 if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
 error_prompt_alert('上傳錯誤,文件格式必須為:png/jpg/jpeg');
 return;
 }else{
 $('#cropedBigImg').css('display','block');
 $('#cropedBigImg').attr('src', src); 
 } 
});

效果如下圖所示:


相關鏈接

版權所有

發表評論

2017怎样手机上赚钱