H5圖片預覽及上傳

一、html布局文件

 <input class="input-upload" type="file" accept="image/*"  name="pic" >之后，我們還需要一個image標簽來存放圖片的預覽：
<img v-bind:src="demand.image" /> //v-bind是vue.js的用法，將src的屬性綁定為demand.image，可支持動態改變src的值，減少dom操作完整的html代碼：
<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和function2
import * 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;