// 因为是string，所以服务器需要对数据进行转码，写文件操作等。
// 个人约定，所有http参数名字全部小写
console.log(dataurl);
//console.log(imagedata);
var data = {
imagename: “myImage.png”,
imagedata: imagedata
};
jQuery.ajax( {
url : url,
data : data,
type : “POST”,
// 期待的返回值类型
dataType: “json”,
complete : function(xhr,result) {
//console.log(xhr.responseText);
var $tip2 = $(“#tip2”);
if(!xhr){
$tip2.text(‘网络连接失败!’);
return false;
}
var text = xhr.responseText;
if(!text){
$tip2.text(‘网络错误!’);
return false;
}
var json = eval(“(“+text+”)”);
if(!json){
$tip2.text(‘解析错误!’);
return false;
} else {
$tip2.text(json.message);
}
//console.dir(json);
//console.log(xhr.responseText);
}
});
};
function init(){
// 获取DOM元素对象
var target = document.getElementById(“drop-target”);
// 阻止 dragover(拖到DOM元素上方) 事件传递
target.addEventListener(“dragover”, function(e){e.preventDefault();}, true);
// 拖动并放开鼠标的事件
target.addEventListener(“drop”, function(e){
// 阻止默认事件，以及事件传播
e.preventDefault();
// 调用前面的加载图像 函数，参数为dataTransfer对象的第一个文件
loadImage(e.dataTransfer.files[0]);
}, true);
var setheight = document.getElementById(“setheight”);
var maxheight = document.getElementById(“maxheight”);
setheight.addEventListener(“click”, function(e){
//
var value = maxheight.value;
if(/^d+$/.test(value)){
MAX_HEIGHT = parseInt(value);
}
e.preventDefault();
},true);
var btnsend = document.getElementById(“btnsend”);
btnsend.addEventListener(“click”, function(e){
//
sendImage();
},true);
};
window.addEventListener(“DOMContentLoaded”, function() {
//
init();
},false);
</script>
</head>
<body>
<div>
<h1>通过Canvas及File API缩放并上传图片</h1>
<p>从文件夹拖动一张照片到下方的盒子里， canvas 和 JavaScript将会自动的进行缩放.</p>
<div>
<input type=”text” id=”maxheight” value=”100″/>
<button id=”setheight”>设置图片最大高度</button>
<input type=”hidden” name=”action” value=”receive.jsp” />
</div>
<div id=”preview-row”>
<div id=”drop-target” style=”width:400px;height:200px;min-height:100px;min-width:200px;background:#eee;cursor:pointer;”>拖动图片文件到这里…</div>
