试图使andyvr/picEdit插件上传文件通过JQUERY post/ajax


Trying to make andyvr/picEdit plugin upload file via JQUERY post/ajax

我使用轻量级图像编辑器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:

如果我能找到一种方法来附加一个回调函数,我就不需要使用这个单独的按钮。