图片上传，图片剪切jquery.imgareaselect

---恢复内容开始---

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>广告设置</title>
<%@include file="/common/common.jsp" %>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>
</head>
<body>
<div class="wrapper details" id="js_layout">
<div class="pad10" id="details_edit" data-options="region:'center'">
<table class="forms">
<tbody>
<tr>
<td class="right"><i class="require">*</i>广告图设置方式：</td>
<td><input type="radio" value="1" name="pic" checked="checked" onclick="$('.tr1').show();$('#tr2').hide()"/>上传图片
<input type="radio" value="0" name="pic" onclick="$('.tr1').hide();$('#tr2').show()"/>设置图片超链接
</td>
</tr>
<tr class="tr1">
<td class="right"><i class="require">*</i>上传图片:</td>
<td>
<form id="form2" method="post" enctype="multipart/form-data">
<input type="file" style="height:22px;" name="advimage" id="advimage" onchange="validateImage();"/>
</form>
</td>
</tr>
<tr class="tr1">
<td class="right"><i class="require">*</i>图片剪切:</td>
<td>
<form id="form1" method="post" enctype="multipart/form-data" >
<img alt="" src="" id="left" onclick="imgAreaSelect();">
<input type="hidden" id="x1" value=""/>
<input type="hidden" id="x2" value=""/>
<input type="hidden" id="y1" value=""/>
<input type="hidden" id="y2" value=""/>
<input type="hidden" id="w" value=""/>
<input type="hidden" id="h" value=""/>
<input type="button" value="剪切" onclick="cutImage()"/>
</form>
</td>
</tr>
<tr class="tr1">
<td class="right"><i class="require">*</i>图片预览</td>
<td>
<form id="form3" method="post" enctype="multipart/form-data" >
<img alt="" src="" id="leftcut">
<input type="hidden" id="currentPath" value="" name="currentPath">
</form>
</td>
</tr>
<tr id="tr2" style="display: none;">
<td class="right"><i class="require">*</i>公告图超链接：</td>
<td><input type="text" name="picurl" id="picUrl" value="http://js.86269191.com/hgzr/img/22.gif" class="txt easyui-validatebox" data-options="required:true,validType:['titleInput','titlelength[200]']"/>
</td>
</tr>
<tr>
<td class="right"><i class="require">*</i>超链接：</td>
<td><input type="text" name="url" id="url" value="http://www.90tuku.com/" class="txt easyui-validatebox" data-options="required:true,validType:['titleInput','titlelength[200]']"/>
</td>
</tr>
<tr>
<td class="right"><i class="require">*</i>广告存放位置：</td>
<td><input type="radio" value="left" name="position" checked="checked" />左侧广告
<input type="radio" value="right" name="position"/>右侧广告
</td>
</tr>
</tbody>
</table>
</div>






<div data-options="region:'south',collapsible:false,height:50" class="noborder hidden">
<div class="ftbutton border-n">
<ul class="lists rf">
<li><button id="_submit" class="button" type="button">上传广告</button></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
function cutImage(){
var currentPath = $("#currentPath").val();
$.ajax({
type: "POST",
url: "${contextPath}/baAdmin/cutImage.htmls",
data: "x1=" + $("#x1").val()+"&x2="+$("#x2").val()+"&y1="+$("#y1").val()+"&y2="+$("#y2").val()+"&w="+$("#w").val()+"&h="+$("#h").val()+"&currentPath="+currentPath,
success: function(msg){
var json = $.parseJSON(msg);
if(json.success=='success'){
$("#currentPath").val(json.currentPath);
$('#leftcut').attr("src",json.currentPath);
}
}
});
// 这里是利用的dwr框架直接调用后台方法，以及使用后台传回的值
// 这个方法就是利用坐标宽高进行切图，事实上这时候的原图已经在服务器了，所以我们只需要知道他的相对路径，即currentPath
// ReleaseService.cutImage(list, currentPath, function(value){

// document.getElementById("currentPath").value = value;
// }
// );

// var bgObj=document.getElementById("bgDiv");
// var msgObj=document.getElementById("cutImageDiv");
// bgObj.style.display = msgObj.style.display = "none";
// piso.cancelSelection();
// haveImage = 1;
// $('#msHaveImage').show();
//$(".imgareaselect-outer").hide();
//$(".imgareaselect-selection").parent().hide();

}
function validateImage(){
var imageVal = $('#advimage').val();
var imageType = imageVal.substr(imageVal.indexOf('.'),imageVal.length);
if(!/.(gif|jp|jpeg|JPG|PNG|png|jpg)$/.test(imageType)){
$.messager.alert('警告','图片类型必须是.jpeg,png,jpg中的一种！','info');
return false;
}
//提交表单
$("#form2").form('submit',
{
url:"${contextPath}/baAdmin/uploadImageDemo.htmls",
onSubmit:function(){return $(this).form('validate'); },
success : function(d) {
var json = $.parseJSON(d);
if (json.success=='success') {
$('#left').imgAreaSelect({
x1:0,y1:0,x2:50,y2:50,onSelectEnd:preview,
resizable:false,
instance:true,
persistent:true
});
$('#left').attr('src',json.tempPath);
$('#currentPath').val(json.tempPath);
// ajaxLoadEnd();
// $.messager.alert('警告','备份成功！','info');
}else{
// $.messager.alert('警告','执行失败！','error');
}
}
});
}
// function uploadImage(){
// var imageVal = $('#advimage').val();
// var imageType = imageVal.substr(imageVal.indexOf('.'),imageVal.length);
// if(!/.(gif|jp|jpeg|JPG|PNG|png)$/.test(imageType)){
// $.messager.alert('警告','图片类型必须是.jpeg,png,jpg中的一种！','info');
// return false;
// }
// $.ajaxFileUpload({
// url:'${pageContext.request.contextPath}/baAdmin/uploadImage',//处理图片脚本
// secureuri :false,
// fileElementId :'advimage',//file控件id
// dataType : 'json',
// success : function (data, status){
// $('#photo').imgAreaSelect({
// x1:0,y1:0,x2:480,y2:520,onSelectEnd:preview,
// resizable:false,
// instance:true,
// persistent:true
// });
// $('#photo').attr('src',data.tempPath);
// },
// error: function(data, status, e){
// alert(e);
// }
// });
// }
function preview(img,selection){
$('#x1').val(selection.x1);
$('#x2').val(selection.x2);
$('#y1').val(selection.y1);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
// function ajaxLoading(){
// $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
// $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
// }
// function ajaxLoadEnd(){
// $(".datagrid-mask").remove();
// $(".datagrid-mask-msg").remove();
// }
jQuery(function($){
$("#js_layout").layout({fit:true});
$("#_submit").click( function () {
var pic = $('input:radio[name="pic"]:checked').val();
var position = $('input:radio[name="position"]:checked').val();
var url = $('#url').val();
var picUrl = $('#picUrl').val();
var file = $('#advimage').val();
if(pic=='1'){
if(file==""){
$.messager.alert('提示','为选择上传图片！！！','info');
return ;
}
}
//提交表单
$("#form3").form('submit',
{
url:"${contextPath}/baAdmin/imageUploadFinlly.htmls?position="+position+"&pic="+pic+"&url="+url+"&picurl="+picUrl,
onSubmit:function(){return $(this).form('validate'); },
success : function(d) {
var json = $.parseJSON(d);
if (json.success=='success') {
$.messager.alert('提示','左侧广告设置成功！','info');
}
}
});
});
});
</script>
</body>
</html>

---恢复内容结束---

// document.getElementById("currentPath").value = value;
// }
// );

/**
* springmvc 上传文件
* @return
*/
@ResponseBody
@RequestMapping("/uploadImageDemo")
public Object uploadImageDemo(@RequestParam(value="advimage",required=false) MultipartFile file, HttpServletRequest request, ModelMap model){
Map<String, Object> resultMap = new HashMap<String, Object>();
System.out.println("开始");
String path = request.getSession().getServletContext().getRealPath("upload");
// String cutpath = request.getSession().getServletContext().getRealPath("cutUpload");
String fileName = file.getOriginalFilename();
System.out.println(path);
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}

//保存
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
resultMap.put("tempPath", request.getContextPath()+"/upload/"+fileName);
resultMap.put("success", "success");
return resultMap;
}

@ResponseBody
@RequestMapping("/cutImage")
public Object cutImage(HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> restMap = new HashMap<String, Object>();
String x11 = request.getParameter("x1");
String x22 = request.getParameter("x2");
String y11 = request.getParameter("y1");
String y22 = request.getParameter("y2");
String ww= request.getParameter("w");
String hh = request.getParameter("h");
String path = request.getParameter("currentPath");
int x1 = Integer.parseInt(x11);
int x2 = Integer.parseInt(x22);
int y1 = Integer.parseInt(y11);
int y2 = Integer.parseInt(y22);
int w = Integer.parseInt(ww);
int h = Integer.parseInt(hh);
if(w <= 0)
w = 120;
if(h<=0)
h = 120;
if(x1<0)
x1 = 0;
if(y1<0)
y1 = 0;

//File file = new File(request.getSession().getServletContext().getRealPath(path));

// path = path.substring(2);

SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
String file_ext = path.substring(path.indexOf("."),path.length());
String uploadpath = request.getSession().getServletContext().getRealPath("upload");
File file = new File(request.getSession().getServletContext().getRealPath(uploadpath));
String imageName =df.format(new Date())+UUIDUtils.getUUID32() + file_ext;
String newFile = uploadpath +"/"+imageName;

//切图操作
abscut(request.getSession().getServletContext().getRealPath(path), newFile, x1, y1, w, h);
// File targetFile = new File(path, fileName);
// if(!targetFile.exists()){
// targetFile.mkdirs();
// }
//
// //保存
// try {
// file.transferTo(targetFile);
// } catch (Exception e) {
// e.printStackTrace();
// }
restMap.put("success", "success");
restMap.put("currentPath", request.getContextPath()+"/upload/"+imageName);
return restMap;
// return BusinessConstants.TEMP_RELATIVE_PICTURE_PATH + imageName;
}

public static void abscut(String srcImageFile,String desImageFile, int x, int y,int width, int height) {
try {
Image img;
ImageFilter cropFilter;
File srcFile = new File(srcImageFile);
//String fileName = srcFile.getName();
String ext = getExtension(srcImageFile);
if(ext==null)ext="jpg";
// 读取源图像
BufferedImage bi = ImageIO.read(srcFile);
int srcWidth = bi.getWidth(); // 源图宽度
int srcHeight = bi.getHeight(); // 源图高度
if (srcWidth >= width && srcHeight >= height) {
BufferedImage tag;
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
// 四个参数分别为图像起点坐标和宽高
// 即: CropImageFilter(int x,int y,int width,int height)
cropFilter = new CropImageFilter(x, y, width, height);
img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
int type = BufferedImage.TYPE_INT_RGB;
if("gif".equalsIgnoreCase(ext)||"png".equalsIgnoreCase(ext)){
type = BufferedImage.TYPE_INT_ARGB;
}
tag = new BufferedImage(width, height,type);
Graphics2D g = (Graphics2D)tag.getGraphics();

g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g.drawImage(img, 0, 0, null); // 绘制剪切后的图
g.dispose();

ImageIO.write(tag,ext, new File(desImageFile));
srcFile.delete();//删除原图
}
} catch (Exception e) {
e.printStackTrace();
}
}

public static String getExtension(String srcImageFile) {
String ext = null;
if(srcImageFile!=null && srcImageFile.lastIndexOf(".")>-1){
ext = srcImageFile.substring(srcImageFile.lastIndexOf(".")+1);
}
return ext;
}

图片上传，图片剪切jquery.imgareaselect的更多相关文章

ajax图片上传(asp.net +jquery+ashx)
一.建立Default.aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&q ...
Django中怎么做图片上传--图片展示
1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...
spring mvc 图片上传,图片压缩、跨域解决、按天生成文件夹 ,删除，限制为图片代码等相关配置
spring mvc 图片上传,跨域解决按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...
基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader
(function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(thi ...
ASP.NET图片上传（配合jquery.from.js 插件）
前端: js: function AjaxKouBeiShopEdit() { var options = { dataType: "json&q ...
Jquery自定义图片上传插件
1 概述编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...
rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能
之前在rails开发中使用了ckeditor作为可视化编辑器,不过感觉ckeditor过于庞大,有很多不需要的功能,而且图片上传功能不好控制不同用户可以互相删除图片,感觉很不好.于是考虑更改可视化编辑 ...
Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...
MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

随机推荐

12、C#基础整理（结构体）
结构体 1.概念: 结构体是写在main函数外的数据结构,由不同类型的数据组合成一个整体,这些组合在一个整体中的数据是互相联系的 2.声明方式: struct 结构体名 { 成员变量(由类型名+成员名 ...
WP8.1 双击两次返回键退出程序
在实现Windows Phone上实现点按两次返回键退出程序, 一种方法是使用Coding4Fun提供的ToastPrompt, 使用方法如下: 1. 安装引用, 打开Package Manager ...
Magento：Paypal付款不成功返回后不要清空购物车产品的解决方案
经常遇到这个问题,当我们使用第三方支付工具Gateway如paypal支付的时候,如果用户付款不成功或者取消了订单再返回网站时,发现购物车里面的产品已经被清空了,如果是客户主动cancel的还好,但是 ...
magento -- 如何为商品分类（category）添加自定义属性
在magento 中,由于使用了强大的EAV设计方法,我们可以很方便的给商品添加任意数量的属性.然而magento 没有给我们提供给商品分类添加属性的功能.尽管我们知道magento所采用的EAV设 ...
第二个Sprint冲刺第四天
讨论地点:宿舍讨论成员:邵家文.李新.朱浩龙.陈俊金今天的发展,探讨了统计功能的问题: 一.统计数据针对的是什么功能? 1.初衷是针对计时的填空题,至于其它功能统不统计,那要看开发的进度. 二.对 ...
mysql explain用法和结果的含义(转)
重点是第二种用法,需要深入的了解. 先看一个例子: mysql> explain select * from t_order; +----+-------------+---------+--- ...
Note Pad++ 关闭语法错误时在代码下面的红线标识
菜单栏 —- 插件 —- DSpellCheck . 将勾去掉即可
htseq-count 的使用
Given a file with aligned sequencing reads and a list of genomic features, a common task is to count ...
asp.net网站提示Ambiguous match found
在ASP.net中,每个aspx页面都会有一个.cs文件,(好像不可以多个aspx共用一个cs的,我前面就碰到这个问题), 在aspx页面中,我们会用到服务器控件,或html控件,这些控件的id命名时 ...
235. Lowest Common Ancestor of a Binary Search Tree
代码如下: /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; ...

图片上传，图片剪切jquery.imgareaselect

图片上传，图片剪切jquery.imgareaselect的更多相关文章

随机推荐

热门专题