H5图片预览及上传

一、html布局文件
html有一个自己的上传文件控件---input，只需要将其type属性设置为file即可上传文件，accept=“image/”是用来限制文件类型为image，input代码如下：
[html] view plain copy
<span style="font-family:KaiTi_GB2312;font-size:18px;"> <span style="font-size:14px;"><input class="input-upload" type="file" accept="image/*" name="pic" ></span>
</span>
之后，我们还需要一个image标签来存放图片的预览：
[html] view plain copy
<span style="font-family:KaiTi_GB2312;font-size:14px;"><img v-bind:src="demand.image" /> //v-bind是vue.js的用法，将</span><span style="font-family:KaiTi_GB2312;font-size:14px;">src的属性绑定为demand.image，可支持动态改变src的值，减少dom操作</span>

完整的html代码：
[html] view plain copy
<span style="font-family:KaiTi_GB2312;font-size:14px;"><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></span>
二、css样式
对应的css样式：
[css] view plain copy
<span style="font-family:KaiTi_GB2312;"><span style="font-size:14px;">@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;
}
}</span>
</span>

三、TS代码
本人的用的是TS写的，编辑器可以自动将TS转化为JS，图片的预览有两种方法，一是根据input获取html5 JS对象；而是根据file对象生成一个图像URL，即下面代码中的function1和function2

[javascript] view plain copy
<span style="font-family:KaiTi_GB2312;font-size:14px;">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;</span>

<div class="intro">
<h4><a href="http://linyi.changtu.com/">临沂汽车总站电话</a></h4>
<p>地址：</p>
<p>电话：</p>
</div>