H5圖片預覽及上傳（WEB前端）
阿新 • • 發佈：2019-01-26
web上傳圖片很簡單，網上有許多的demo和js，但是本人嫌棄用那些會引入許多js包，所以還是用原生的jquery來寫吧。
一、html佈局檔案
html有一個自己的上傳檔案控制元件---input，只需要將其type屬性設定為file即可上傳檔案，accept=“image/”是用來限制檔案型別為image，input程式碼如下： <input class="input-upload" type="file" accept="image/*" name="pic" >
<img v-bind:src="demand.image" /> //v-bind是vue.js的用法，將 <div id="ImageUploader" data-vpid="<%-VPID%>" data-vpcon="`{MODURL}`.js">
<div class="filearea">
<span class="btn-upload icon-enclosure">
<input class="input-upload" type="file" accept="image/*" name="pic" >
</span>
<div class="preview" >
<i class="hide"></i>
<img v-bind:src="demand.image" />
<div class="remove icon-delete"></div>
</div>
</div>
</div> 二、css樣式
對應的css樣式：@import "src/node_modules/views/global/sass/mixin";
#ImageUploader {
position: relative;
.btn-upload {
position: relative;
overflow: hidden;
width: 1.57rem;
height: 1.05rem;
border: solid 1px $blue;
display: table-cell;
vertical-align: middle;
text-align: center;
color: $blue;
z-index: 20;
margin-top: 10px;
margin-left: 15px;
}
.input-upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
cursor: pointer;
direction: ltr;
font-size: 200px !important; /* 為了能點中，弄個超大字號 */
}
.preview {
position: absolute;
}
img {
max-width: 1.57rem;
max-height: 1.05rem;
}
.remove {
position: absolute;
top: -8px;
right: -8px;
z-index: 10;
width: 0.16rem;
height: 0.16rem;
border-radius: 50%;
color: white;
background: $blue;
font-size: 0.11rem;
text-align: center;
padding-top: 2px;
}
} 三、TS程式碼
本人的用的是TS寫的，編輯器可以自動將TS轉化為JS，圖片的預覽有兩種方法，一是根據input獲取html5 JS物件；而是根據file物件生成一個影象URL，即下面程式碼中的function1和function2import * as tomato from "@po-to/tomato";
import * as project from "views/global/common/Project";
import * as funs from "views/global/common/Funs";
import * as model from "views/global/common/Model";
import * as Vue from "vue";
import css = require("./css"); //在js中引入css樣式
import * as api from "views/global/common/API";
class VPresenter extends project.VPresenter {
/**模組 */
private ImageUploader_vue: any;
/**預覽圖片 */
private img;
private preview;
/**input控制元件 */
private inputUpload;
private btnUpload: JQuery;
/**demand */
private demand;
// private form;
constructor(view: tomato.VPView, parent?: tomato.VPresenter, vpid?: string) {
super(view, parent, vpid);
var aaa = css;//hack
var user = model.globalData.user;
var demand = this.demand = model.globalData.demand;
var that = this;
//取到html中的元素
this.preview = this.find(".preview");
this.btnUpload = this.find(".btn-upload ");
this.inputUpload = this.find(".input-upload");
/**刪除預覽 */
this.preview.on('click', function () {
that.demand.image = '';
that.setImg();
});
/**預覽上傳圖片 */
this.inputUpload.on('change', function (event) {
// 根據這個 <input> 獲取檔案的 HTML5 js 物件
var files = event.target.files, file;
if (files && files.length > 0) {
// 獲取目前上傳的檔案
file = files[0];
// 來在控制檯看看到底這個物件是什麼
console.log(file);
// 那麼我們可以做一下諸如檔案大小校驗的動作
if (file.size > 1024 * 1024 * 2) {
alert('圖片大小不能超過 2MB!');
return false;
}
// 圖片預覽 function 1
if (window['FileReader']) {
var reader = new FileReader();
} else {
alert("您的裝置不支援圖片預覽功能，如需該功能請升級您的裝置！");
}
var reader = new FileReader();
var imageType = /^image\//;
//是否是圖片
if (!imageType.test(file.type)) {
alert("請選擇圖片！");
return;
}
//讀取完成
reader.onload = function (e) {
//圖片路徑設定為讀取的圖片
that.demand.image = this.result;
};
reader.readAsDataURL(file);
// 圖片預覽 function 2
// 下面是關鍵的關鍵，通過這個 file 物件生成一個可用的影象 URL
// 獲取 window 的 URL 工具
// var URL = window.URL || window['webkitURL'];
// 通過 file 生成目標 url
// var imgURL = URL.createObjectURL(file);
// 用這個 URL 產生一個 <img> 將其顯示出來
// demand.image = imgURL;
// 使用下面這句可以在記憶體中釋放對此 url 的伺服，跑了之後那個 URL 就無效了
// URL.revokeObjectURL(imgURL);
that.fileUpload(file);//預覽出現後呼叫上傳方法，傳值為一個file物件，也可以傳demand.image預覽地址，看伺服器那邊怎麼要求的
}
});
this.setImg();
//this._watchEvent();
}
/** 初始化*/
private setImg() {
/**是否有圖片 */
if ("" == this.demand.image) {
this.preview.addClass("hide");
this.btnUpload.removeClass("hide");
} else {
this.btnUpload.addClass("hide");
this.preview.removeClass("hide");
}
}
/**上傳檔案，引數:訂單id和檔案物件 */
private fileUpload(file) {
var that=this;
var demand_id = this.demand.id;
var formData = new FormData();
formData.append('demand_id', demand_id);
formData.append('file', file);
$.ajax({
xhrFields: {withCredentials: true},//ajx請求時帶上cookie
url: 'http://dev.v2.api.wanpinghui.com/Img/uploadDemandPlaceImage',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function (json) {
console.log("::"+json.image);
model.globalData.demand.image = json.image;
}).fail(function (json) { });
}
}
export = VPresenter;