我使用轻量级图像编辑器jQuery插件andyvr/picEdithttps://github.com/andyvr/picEdit
这只是一个插件,它将input:file元素转换为HTML画布,并允许用户在客户端选择/编辑/裁剪/操作图像文件。实际的上传和处理是通过通常的FORM UPLOAD和PHP $_FILE进程完成的。
我想做的是从这个插件中抓取"编辑"的图片数据,并通过$.post()发送,而不是通过表单提交操作。
你们知道我应该选择在我的帖子变量中包含什么元素吗?
var postvars = {};
postvars.final_image = $("#what_element").val();
$.post("script-name.php", postvars ,function(data){.....
我试着去通过JS文件,但我似乎不能弄清楚。
PS我希望我把这个问题讲清楚了。我花了很长时间来组织它。
假设您使用的是与我使用的相同的picedit,并且仍在寻找答案:
html文件输入:
<input type='file' name='thefile' id='thebox'>
使文件输入像图像编辑框一样的jquery:
$(function() {
$('#thebox').picEdit();
});
post命令:
$.post( "handler.php", { story_edited : 1, id : 1 }, function( data ){ document.getElementById( 'photos' ).innerHTML = html = data }, "html" );
指出:
handler.php =要用来处理输入的文件名!
<div id='photos' name='photos'>
是一个标准的div标签,我用它来更新页面另一部分的屏幕信息!因此,文档。getElementById('photos')。innerHTML将把handler .php加载到照片div标签中!
使用:
foreach($_FILES as $file)
处理图像作为正常文件从网页上传!
我有另外一个按钮把它们拉在一起。编辑完图像后,单击一个更新按钮,该按钮调用处理程序,上传并保存文件,并动态更新页面上其他地方的相册部分。
TODO:
如果我能找到一种方法来附加一个回调函数,我就不需要使用这个单独的按钮。