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

Question

我正在使用名为andyvr / picEdit的轻量级图像编辑器jQuery插件 https://github.com/andyvr/picEdit

这只是一个插件，可以将输入：文件元素转换为HTML游戏，并允许用户在客户端选择/编辑/裁剪/操作图像文件。实际的上传和处理是通过通常的FORM UPLOAD和PHP $ _FILE进程完成的。

我想要做的就是抓住＆＃34;编辑＆＃34;来自此插件的图片数据，并通过$ .post（）而不是通过表单提交操作发送。

你们知道我应该选择在我的帖子变量中包含哪些元素吗？

var postvars = {};
postvars.final_image = $("#what_element").val();

$.post("script-name.php", postvars ,function(data){.....

我试图浏览JS文件，但我似乎无法弄明白。

PS 我希望我能清楚地看到这个问题。我很难构建它。

Answer 1

假设您使用的是与我使用的相同的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标签，我用它来更新页面另一部分的屏幕信息！因此，document.getElementById（'photos'）.innerHTML会将handlers.php加载到photos div标签中！

使用：

foreach($_FILES as $file)

将图像作为正常文件从网页上传处理！

我还有一个按钮可以将它们全部拉到一起。编辑完图像后，单击调用处理程序的更新按钮，上传并保存文件，并动态更新页面上其他位置的photoalbum部分。

TODO：

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