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;