本文介绍如何使用HTML5和JQuery裁剪图像实时预览缩略图并上传,需要用到插件Jcrop。
HTML5和JQuery裁剪图片
使用HTML5和JQuery裁剪图片
调用JQuery库文件
调用Jcrop js插件
该js文件需要下载到本地(文件包含在本文源码压缩包里),调用时要注意文件路径。
调用css文件
css文件要下载到本地(文件包含在本文源码压缩包里),调用时要注意文件路径。
html标记
HTML标记由HTML FileUpload、HTML Image、HTML按钮、HTML5 Canvas 和一些隐藏字段组成。
JQuery实现代码
$(function () {
$('#FileUpload1').change(function () {
$('#Image1').hide();
var reader = new FileReader();
reader.onload = function (e) {
$('#Image1')